CLEditor Plugin: MyStyles Plugin

HavaLite CMS

A new liteweight Content Management System (CMS)

CLEditor Plugin: MyStyles Plugin

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


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

<script type="text/javascript" src=""></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;

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


comments powered by Disqus


  1. 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.


  2. Written by: admin
    on 14.Nov.2012
    You mean a demo?
    I did not do any, but i can do one for you here:

Leave a Reply

Contact Info

Phone: +49 941 26175

Address: Ayman Teryaki,
Prüfeninger Str. 48,
93047 Regensburg, Germany

Want more info - go to our contact page or visit Google+


Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

Recent Comments