CLEditor Plugin: MyStyles Plugin

29.Oct.2012  |  Posted by admin  |  Filed under JQuery Plugins

CLEditor is one of the best jQuery WYSIWYG open source editors in the internet. It has most features for small projects and can also be easly developed to add more features to it. The imlementation on a web site is very easy, thats why i choosed it to be a plugin for Havalite CMS and in other projects of mine. The only thing i needed is to allow users to add a list of thier own defined CSS Styles, maybe some which are not used in CLEditor such as(direction:RTL, display:Block, list-style, own fonts etc..). And for this purpose i made the plugin "myStyles" which can be added to CLEditor

Usage:

First we need the jQuery framework as usual by any jQuery project:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

After that we implement the CLEditor. (If you still don't have it, you can download from here)

<script type="text/javascript" src="jquery.cleditor.js"></script>

Now we add jquery.cleditor.mystyles.js to get a new button on the edtor for our own styles. Don't forget to put the the icon mystyles.png in the images folder!

<script type="text/javascript" src="jquery.cleditor.mystyles.js"></script>

And here is the part for implementing CLEditor with some features such as width and height:

<script type="text/javascript">
$(document).ready(function() {
    $.cleditor.defaultOptions.width = 500;  // OR '100%'
    $.cleditor.defaultOptions.height = 300;
    $("textarea").cleditor();
});
</script>

Now CLEditor is ready and can be seen on your site. If you want to use it only for a specified textarea, change the last line by adding the id or class of the textarea: $("#myTextArea").cleditor();

Under mystyles button you'll find only 4 defined styles. To change or add more, open the file jquery.cleditor.mystyles.js, there you'll see the var mylist. Just add the name of your style and the styles you want as follow:

var mslist = {
    "Marker Yellow" : "color:red; background-color:#FFFF00;",
    "Marker Green" : "color:#000; background-color:#00FF00;",
    "divider" : "",
    "Language RTL" : "direction:rtl; display:block;",
    "Language LTR" : "direction:ltr;"
};

Thats it

See Demo

Download: mystyles.zip

2 Comments

Written by: bob on 14.Nov.2012

I don´t know if my question is arrived to you... if yes.. sorry for this second message.

Hello, I try for script and un formtunately, I see your button or your css list.

Have you may be a simple page where i can see how you mix your script with the cleditor script and how you write the texarea zone ?

Thanks a lot.

Bob

Written by: admin on 14.Nov.2012

Hey
You mean a demo?
I did not do any, but i can do one for you here: http://havalite.com/experiment/cleditor/

Write a Comment