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.

[Post Reader]

a problem i am facing is that i want a bigger font size for default in my new thread and quick reply as well. how to increase it?

[nomoreturn]

Very Nice Mod For Urdu Forum i installed but have one problem in post area its not showed up i attached a image to have a look on it

[salalyusuf]

excellent job done
i installed and followed the instructions, and in the result everything is perfectly work fine
many congratulations for this good show.

[freak46]

i am unsuccessful please help me does it work with 4.2.1

[K!nG]

AOA.

Great mod, works on latest vb 4 versions, but only problem i have is, it's not working in Chrome and majority of my users are using Chrome. It works fine in IE as its been explained above. If anyone can please suggest me a fix to get it work in chrome as well ?

Will really appreciate it.

Thanks

[Pakblogger]

Is it working on 4.2.3?

[urdudesigner]

hi
using version 4.2.5
followed the instruction
failed

please guide

[urdudesigner]

Hi,
Any one available to support for installation of URDU