Wednesday, November 10, 2010

Adding Rich Text Editor to Wordpress Sidebar Widget

Now i'm telling you on how to add a rich text editor inside a Text/HTML widget in a Wordpress Admin Panel - Widget Area. Here we are using CKE Editor as the Rich Text Editor
Steps
1. Download CKE Editor 
2. Extract the cke editor files to your 'wp-content\themes' folder
3. Go to admin header page \wp-admin\admin-header.php file and add the javascript reference in the head

4. Go to admin footer page. Add the below script above
< script type="text/javascript">
    CKEDITOR.replace( 'widget-text-4-text',
    {
        toolbar :
        [
            ['Bold', 'Italic','Underline','Strike', '-', 'NumberedList', 'BulletedList','Blockquote', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Undo','Redo','Link','Unlink','RemoveFormat','TextColor','Image']
        ]
       

    });
Replace 'widget-text-4-text' with your widget text area id. View the below image to know how to get your widget text area id.
5. Done
6. Go to wp-admin page -> Widgets -> Add Text/HTML widget to sidebar.
7. Voila.. Now you can see the RTE in action.


3 comments:

Anonymous said...

This could be awesome... If it worked!

Unknown said...

sort of very confusing instructions.
Can you please be more clear on point 2,Add which Java script to header.php and exactly where?

Also which footer in Admin panel? and where your php code should placed.
I am sorrry to say your instructions are sort of confusing and diffcult to follow.

Aravind NC said...

put this in header,
< script type="text/javascript" src="/apps/ckeditor/3.6.2/ckeditor.js">< /script >

put rest of the codes in admin-footer.php file

Popular Posts