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.

[M.Iftikhar]

brother one more information needed does it work on chat room....your old editor works with chat but this one not work....i am using DBTech - vBShout...Does it work on this chat room......thanks and reply me soon..

[simunaqv]

This mod only provides Urdu editor integration for the basic edit areas of the forum. I do not plan to support any third party add-ons.

[shakirulqadree]

thanks! installed

[creative-friend]

Assalam-o-Alaikum

Woww Brother.......

Best Mod For Urdu Forums.....

I will install it and let you know In Sha ALLAH.

[creative-friend]

I am using Vbulletin 4.1.3

Will it work on this version??

[LbR]

I wish i had urdu site good work guys

[SpaceStar]

Originally Posted by simunaqv

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.

I did it on you advice and everyone seems to be happy - thanks.

Just another question: When I write in Urdu, it use Nastaleeq, which is good, but when it's displayed in thread, it shows in Unicode/Nasakh. Have you any idea of why?

[simunaqv]

The editor does not control how the text is displayed. You need to customize your forum's theme to use whatever font you like.

[tafreeh]

Thanks... finally someone cares about Urdu...

[creative-friend]

I have done everything

But i cant see it in quick reply