New Posting Features - Urdu Editor Integration for vBulletin 4.1.6

Hello,

Since the introduction of CKEditor in newer versions of vbulletin, the Urdu editor cannot be integrated simply by including some javascript code inside the headinclude template. I have therefore written a ckeditor plugin to enable Urdu text editing. This plugin is part of the Urdu editor integration that I am providing here. This makes it possible to type Urdu even in the wysiwyg mode. The following screenshots show the editor on the post page in standard editor mode and the wysiwyg mode respectively.






Installation

1. Unpack the zip-archive and upload the contents of the upload folder to your forum file area.

2. Import the product file product-urdu_editor.xml

3. Open template headinclude
Add at the end the following code:

<script src="{vb:raw vboptions.bburl}/clientscript/jquery/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script src="{vb:raw vboptions.bburl}/clientscript/jquery/jquery.UrduEditor.js" type="text/javascript"></script> 

<script language="JavaScript" type="text/javascript">
    jqcc = jQuery.noConflict(true);
    jqcc.fn.UrduEditor.defaults.EditorFont = 'Jameel Noori Nastaleeq';
    jqcc.fn.UrduEditor.defaults.LineBreak = false;
    jqcc(document).ready(function () {
        <vb:if condition="THIS_SCRIPT == 'newthread'">
            jqcc('#title').UrduEditor("14px"); 
            jqcc('#subject').UrduEditor("14px"); 
            jqcc('#tagpopup_ctrl').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'newreply'" />
            jqcc('#title').UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px");    
        <vb:elseif condition="THIS_SCRIPT == 'showthread'" />
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_QR_textarea'));
            jqcc('#vB_Editor_QR_textarea').UrduEditor("18px");
        <vb:elseif condition="THIS_SCRIPT == 'member'" />
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_QR_textarea'));
            jqcc('#vB_Editor_QR_textarea').UrduEditor("18px");              
        <vb:elseif condition="THIS_SCRIPT == 'editpost'" />
            jqcc("input[name='reason']").UrduEditor("14px"); 
            jqcc('#titlefield').UrduEditor("14px"); 
            jqcc('#editreason').UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px");            
        <vb:elseif condition="THIS_SCRIPT == 'profile'" />
            jqcc('#buddylist_add_txt').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'private'" />            
            jqcc('#pmrecips_ctrl').UrduEditor("14px"); 
            jqcc('#bccpmrecips_ctrl').UrduEditor("14px"); 
            jqcc('#title').UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px");            
            jqcc('#vB_Editor_QR_textarea').UrduEditor("18px"); 
            jqcc('#searchuser_ctrl').UrduEditor("14px"); 
            jqcc('#searchtitle').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'blog'" />
            jqcc('#quicksearch_blog_text').UrduEditor("14px");        
        <vb:elseif condition="THIS_SCRIPT == 'blog_post'" />
            jqcc("input[name='title']").UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px");         
            jqcc('#tag_input').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'blog_report'" />
            jqcc("textarea[name='reason']").UrduEditor("16px"); 
        <vb:elseif condition="THIS_SCRIPT == 'report'" />
            jqcc('#message').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'content'" />
            jqcc('#title').UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px"); 
            jqcc('#html_title').UrduEditor("14px"); 
            jqcc("textarea[name='description']").UrduEditor("16px"); 
            jqcc('#keywords').UrduEditor("14px"); 
            jqcc("input[name='title']").UrduEditor("14px"); 
            jqcc('#cms_node_title').UrduEditor("14px"); 
            jqcc('#cms_node_title').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'infraction'" />
            jqcc('#title').UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px");   
        <vb:elseif condition="THIS_SCRIPT == 'entry'" />
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_QR_textarea'));
            jqcc('#vB_Editor_QR_textarea').UrduEditor("18px");       
        <vb:elseif condition="THIS_SCRIPT == 'group'" />
            jqcc('#groupname').UrduEditor("14px"); 
            jqcc('#groupdesc').UrduEditor("16px"); 
            jqcc("input[name='Subject']").UrduEditor("14px"); 
            jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Editor_001_textarea'));
            jqcc('#vB_Editor_001_textarea').UrduEditor("18px"); 
            jqcc('#message').UrduEditor("14px"); 
        <vb:elseif condition="THIS_SCRIPT == 'group_inlinemod'" />
            jqcc("input[name='deletereason']").UrduEditor("14px");       
        <vb:elseif condition="THIS_SCRIPT == 'album'" />
            jqcc('#ititle').UrduEditor("14px"); 
            jqcc('#idesc').UrduEditor("14px");        
        <vb:elseif condition="THIS_SCRIPT == 'register'" />
            jqcc('#regusername').UrduEditor("14px");         
        </vb:if>
        
        jqcc('#navbar_username').UrduEditor("12px");        
        jqcc("input[name='query']").UrduEditor("13px"); 
        jqcc("input[name='q']").UrduEditor("14px");
        jqcc('#userfield_txt').UrduEditor("14px"); 
        jqcc('#tag_add_input').UrduEditor("14px"); 
        jqcc('#vb_login_username').UrduEditor("14px");       
    });
</script>

4. Open template editor_contents.css
Add at the end the following code:

body.forum {
    font: 18px 'Jameel Noori Nastaleeq';
    direction:rtl;
}
body.content {
    font: 18px 'Jameel Noori Nastaleeq';
    direction:rtl;
}

Customization of the Urdu editor

In order to modify the font of the non-wysiwyg editor, change the font name in the following line:

jqcc.fn.UrduEditor.defaults.EditorFont = 'Jameel Noori Nastaleeq';

To modify the font of the wysiwyg editor you will need to adapt the css code added to the editor_content.css template.

Update October 12, 2011

-fixed a bug in the CKEditor plugin that prevented Urdu editor integration in the standard editor mode.

[rr2000]

Hi

Good one! How to extend to other languages like Hindi, Telugu or Tamil?

[creative-friend]

Assalam-o-Alaikum bro

I have installed it and it worked perfect for me

But getting complains from some members about google chrome

Even i checked in chrome it doesnt work in chrome

Do you have any idea what is wrong??

[simunaqv]

Originally Posted by rr2000

Hi

Good one! How to extend to other languages like Hindi, Telugu or Tamil?

Have a look at the code. It uses a simple lookup to replace keystrokes.

Originally Posted by creative-friend

Assalam-o-Alaikum bro

I have installed it and it worked perfect for me

But getting complains from some members about google chrome

Even i checked in chrome it doesnt work in chrome

Do you have any idea what is wrong??

I tested it in chrome and it worked fine. Which version of chrome are you using?

[M.Iftikhar]

Originally Posted by simunaqv

I tested it in chrome and it worked fine. Which version of chrome are you using?

Dear brother.... you are done great job....but many user that using chrome are facing problem....you said it work on chrome... i accept your comments ...but brother you cheek it on chrome using this option... Standard Editor - Extra formatting controls.
if we select this option it works in chrome but if we Select Enhanced Interface - Full WYSIWYG Editing it does not work in chrome but other browser work fine.....this is the point if it works all the browser then why it does not work in chrome...please brother we requesting you solved this problem. if we enabled Enhanced Interface - Full WYSIWYG Editing then it works on chrome.....and many site owner uninstalled this plugins due to this problem please solved this problem brother....please brother this is the last thing do it for us............thanks

[Kiran-E-Sehar]

how can i change default editor to Eniglish ?

it is now Urdu and even there is not any button to change editor to urdu-english

please guide me
Thanks

And great Job Bro

[creative-friend]

Originally Posted by Kiran-E-Sehar

how can i change default editor to Eniglish ?

it is now Urdu and even there is not any button to change editor to urdu-english

please guide me
Thanks

And great Job Bro

Assalam-o-Alaikum Brother

Switching between languages u need to press Ctrl+Space and it will change the language....

[SulemanSubhani]

is working on 4.1.10 ?

[salman.attari]

Assalamoalikum ,

This is great plugin.

But i want to ask a question.

Where to find the Forum File Area.

Thanks.

JazakALLAH.

[JAFRI]

Originally Posted by Kiran-E-Sehar

how can i change default editor to Eniglish ?

it is now Urdu and even there is not any button to change editor to urdu-english

please guide me
Thanks

And great Job Bro

edit plugin.js file.
var urdueditor_lang = 0; // 1: Urdu, 0: English if u want default english.

[JAFRI]

Originally Posted by salman.attari

Assalamoalikum ,

This is great plugin.

But i want to ask a question.

Where to find the Forum File Area.

Thanks.

JazakALLAH.

Forum File Area.
public_html/ur forum root/clientscript/