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 easily developed to add more features to it. The implementation on a web site is very easy, that’s 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 their 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<\/p>\n
First we need the jQuery framework as usual by any jQuery project:<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script><\/pre>\nAfter that we implement the CLEditor. (If you still don’t have it, you can download from here<\/a>)<\/p>\n
<script type=\"text\/javascript\" src=\"jquery.cleditor.js\"><\/script><\/pre>\nNow we add jquery.cleditor.mystyles.js<\/tt> to get a new button on the editor for our own styles. Don’t forget to put the the icon mystyles.png<\/strong> in the images folder!<\/p>\n
<script type=\"text\/javascript\" src=\"jquery.cleditor.mystyles.js\"><\/script><\/pre>\nAnd here is the part for implementing CLEditor with some features such as width and height:<\/p>\n
<script type=\"text\/javascript\">\r\n$(document).ready(function() {\r\n $.cleditor.defaultOptions.width = 500; \/\/ OR '100%'\r\n $.cleditor.defaultOptions.height = 300;\r\n $(\"textarea\").cleditor();\r\n});\r\n<\/script><\/pre>\nNow 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(); <\/tt><\/p>\n
Under mystyles button you’ll find only 4 defined styles. To change or add more, open the file jquery.cleditor.mystyles.js<\/tt>, there you’ll see the var mylist<\/strong><\/tt>. Just add the name of your style and the styles you want as follow:<\/p>\n
var mslist = {\r\n \"Marker Yellow\" : \"color:red; background-color:#FFFF00;\",\r\n \"Marker Green\" : \"color:#000; background-color:#00FF00;\",\r\n \"divider\" : \"\",\r\n \"Language RTL\" : \"direction:rtl; display:block;\",\r\n \"Language LTR\" : \"direction:ltr;\"\r\n};\r\n<\/pre>\nThats it<\/p>\n