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.

[SpaceStar]

Originally Posted by simunaqv

You don't need buttons to type Urdu or to switch language mode. These buttons are not available for wysiwyg mode. You can instead use the CTRL+SPACE shortcut for switching the language mode. Alternatively you can change preferences in your profile settings to use the standard editor instead of the wysiwyg one. This will then appear with the language controls.

brother I have a very odd Advance Reply layout - none of the icons are visible - as you can see in the image, I attached to my previous post. I had upgraded vBulletin to 4.1.7.

Quick Reply is looking equally odd.

[JAFRI]

Good work, i need this ;-) just i like some changing.

var urdueditor_lang = 0; // 1: Urdu, 0: English

[M.Iftikhar]

Originally Posted by JAFRI

Good work, i need this ;-) just i like some changing.

var urdueditor_lang = 0; // 1: Urdu, 0: English

WHAT IS MEAN (var urdueditor_lang = 0; // 1: Urdu, 0: English)

[uhking]

Originally Posted by SpaceStar

It's a much needed mod for urdu boards, I have installed it and it works ok, though I have disabled it again. Reason? None of the icons are showing in the WYSIWYG editor, see image attached.

Quick reply looks very odd

Brother, you should change the directory of the images in stylvars:

in Stylvars find (imgdir_editor) click on it and change image path to "images/editor"

Thanks,

[JAFRI]

Originally Posted by uhking

Brother, you should change the directory of the images in stylvars:

in Stylvars find (imgdir_editor) click on it and change image path to "images/editor"

Thanks,

change bburl.

bburl}/image/xxxx/xxxx

[JAFRI]

Originally Posted by M.Iftikhar

WHAT IS MEAN (var urdueditor_lang = 0; // 1: Urdu, 0: English)

my forum has default editor like english. because 70% members don't know urdu.

[simunaqv]

Update October 12, 2011

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

[SpaceStar]

Originally Posted by simunaqv

Update October 12, 2011

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

Salaam

Did you checked it different browsers? I get odd layout in Explorer. FireFox is acting normal, but Explorer is showing an odd advanced edit layout.

Secondly: Can the user have an option of using Urdu Editor or default English Editor??

[simunaqv]

Originally Posted by SpaceStar

Salaam

Did you checked it different browsers? I get odd layout in Explorer. FireFox is acting normal, but Explorer is showing an odd advanced edit layout.

Secondly: Can the user have an option of using Urdu Editor or default English Editor??

The editor enhancement is only there for providing an Urdu editor. It does not modify the layout.

You can set up a separate style on your forum which contains the Urdu editor integration. Those who want to use the Urdu editor can set that style as their default.

[M.Iftikhar]

thanks brother now it work i am using 4.1.7 and it works fine....also now work fine in Google chrome and Firefox...thanks brother