Urdu Editor Integration for vBulletin 4.1.6

[simunaqv]

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.


https://vborg.vbsupport.ru/external/2011/10/52.png

https://vborg.vbsupport.ru/external/2011/10/53.png

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_Edit or_001_textarea'));
jqcc('#vB_Editor_001_textarea').UrduEditor("18px");
<vb:elseif condition="THIS_SCRIPT == 'showthread'" />
jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Edit or_QR_textarea'));
jqcc('#vB_Editor_QR_textarea').UrduEditor("18px");
<vb:elseif condition="THIS_SCRIPT == 'member'" />
jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Edit or_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_Edit or_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_Edit or_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_Edit or_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_Edit or_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_Edit or_001_textarea'));
jqcc('#vB_Editor_001_textarea').UrduEditor("18px");
<vb:elseif condition="THIS_SCRIPT == 'entry'" />
jqcc(this).UrduEditor.writeKeyboard(jqcc('#vB_Edit or_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_Edit or_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]

Assalamo Allaikum

Where to find: Open template editor_contents.css ?

[Shadow]

AdminCP --> Styles and Templates --> Search in Templates.

Type in editor_contents.css in to the box and select Yes on "Search Titles Only". Click Find and you should get what you're looking for.

[SpaceStar]

AdminCP --> Styles and Templates --> Search in Templates.

Type in editor_contents.css in to the box and select Yes on "Search Titles Only". Click Find and you should get what you're looking for.

I did that - but I didn't find anything - that's why I posted here :)

[SpaceStar]

I found out why I couldnt find editor_contents.css - I was using an elder version of vBulletin.

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.

If you reply to a post and click in on the Urdu, the cursor jumps to the title field instead of the editing field.

Reply with Quote - does not work anfter this mod neither do the Reply button.

Quick reply looks very odd

[M.Iftikhar]

very nice brother i will cheeked this i am very thankful to you.....i am waiting many days ago...thanks

[M.Iftikhar]

does it work 4.1.7 i try but it could not work....please tell me does it work or not in 4.1.7..thanks and reply me soon.

[M.Iftikhar]

AdminCP --> Styles and Templates --> Search in Templates.

Type in editor_contents.css in to the box and select Yes on "Search Titles Only". Click Find and you should get what you're looking for.

you can find editor_contents.css in CSS Templates...thanks

[simunaqv]

I found out why I couldnt find editor_contents.css - I was using an elder version of vBulletin.

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.

If you reply to a post and click in on the Urdu, the cursor jumps to the title field instead of the editing field.

Reply with Quote - does not work anfter this mod neither do the Reply button.

Quick reply looks very odd

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.


does it work 4.1.7 i try but it could not work....please tell me does it work or not in 4.1.7..thanks and reply me soon.

I did not test it on 4.1.7. What is the problem that you are facing?

[M.Iftikhar]

Standard Editor - Extra formatting controls USE KIY HA LAKIN YA WORK NAHI KR REHA YA MOD SELECT KRNA SE URDU TU BILKUL EDITOR MEIN TYPE NAHI HOTI.....
Enhanced Interface - Full WYSIWYG Editing..KRNA SE TYPE HOTI HA LAKIN NA BACKGROUND COLOR SHOW HOTA HA OR NA LANGUAGE CONTROL SHOW HOTA HA....ZARA BAHI YA KAM KR DY.......THANKS

[SpaceStar]

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]

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]

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]

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]

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. :p

[simunaqv]

Update October 12, 2011

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

[SpaceStar]

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]

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

[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]

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

[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]

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.


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]

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]

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]

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]

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/

[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