Urdu Editor Integration for vBulletin 4.1.6

Urdu Editor Integration for vBulletin 4.1.6

Mod Version: 1.00, by simunaqv

vB Version: 4.1.6	Rating: (3 votes - 5.00 average)	Installs: 16
Released: 11 Oct 2011	Last Update: 12 Oct 2011	Downloads: 135
Not Supported Uses Plugins Template Edits Re-usable Code

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:

HTML 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:

HTML 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:

HTML Code:

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.

Download

vb416_urdueditor.zip (27.0 KB, 159 downloads)

Integration with vBulletin Virtual Urdu Editor for vBulletin 4	vBulletin 4.x Add-ons
New Posting Features Add an Urdu Editor to your vBulletin forum - Urdu OpenPad integration	vBulletin 3.6 Add-ons

vBulletin LTS