Yii 1.1: jqcleditor

ClEditor jquery plugin for Yii
3 followers

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

This extension allows to insert this cool plugin in your applications.

Requirements

Created using Yii 1.1.4

Usage

Download and place unzipped contents in their correspondent places (in the example package I have include a cleditor.php view, a TestController controller, a test_layout.php layout, and the extension as a widget (you can place it wherever you want to -widgets or extensions, is up to you)

For the sake of the example, I placed the extension on protected/extensions. Thanks Petruzza.

*** Please refer to the examples within the download package for information related to other parts of its usage. The important bit is the following one.

On your view:

//
// import the library (here widgets)
Yii::import('application.extensions.jqClEditor');
 
$opts = array(
'width'=>500, // width not including margins, borders or padding
'height'=>250, // height not including margins, borders or padding
'controls'=>     // controls to add to the toolbar
      "bold italic underline strikethrough subscript superscript | font size " .
      "style | color highlight removeformat | bullets numbering | outdent " .
      "indent | alignleft center alignright justify | undo redo | " .
      "rule image link unlink | cut copy paste pastetext | print source",
'colors'=>       // colors in the color popup
      "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " .
      "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " .
      "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " .
      "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " .
      "666 900 C60 C93 990 090 399 33F 60C 939 " .
      "333 600 930 963 660 060 366 009 339 636 " .
      "000 300 630 633 330 030 033 006 309 303",    
'fonts'=>        // font names in the font popup
      "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," .
      "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
'sizes'=>        // sizes in the font size popup
      "1,2,3,4,5,6,7",
'styles'=>       // styles in the style popup
      array(
        array("Paragraph", "<p>"), 
        array("Header 1", "<h1>"), 
        array("Header 2", "<h2>"),
        array("Header 3", "<h3>"),  
        array("Header 4","<h4>"),  
        array("Header 5","<h5>"),
        array("Header 6","<h6>")
      ),
'useCSS'=>false, // use CSS to style HTML when possible (not supported in ie)
'docType'=>      // Document type contained within the editor
      '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
'docCSSFile'=>   // CSS file used to style the document contained within the editor
     "", 
'bodyStyle'=>    // style to assign to document body contained within the editor
     "margin:4px; font:10pt Arial,Verdana; cursor:text"
);
 
// here using the static function
// I pass the id of the jquery DOM selector
jqClEditor::clEditor('#test',$opts);
 
// now using it as an object
$editor = new jqClEditor();
 
$editor->addClEditor('#test2', $opts);
 
?>
 
<p></p><form>
<h3>This one is using the static function clEditor</h3>
<textarea rows="" cols="" id="test"></textarea>
<br/>
<br/>
<h3>This one is by creating an jqClEditor and using the addClEditor function</h3>
<textarea rows="" cols="" id="test2"></textarea>
</form>

The above is extracted from the example view file I included within the package.

The good thing about this plugin is that is very lightweight and also, you can easily integrate them in your ajax calls without the need to remove controls as tinyMCE requires (otherwise tinyMCE fires an error)

Resources

Total 5 comments

#2468 report it
Antonio Ramirez at 2011/01/06 12:11pm
@petruza

Done that,

Thanks for pointing me that. I had widgets as a self made shortcut, sorry. Now it is updated.

#2195 report it
petruza at 2010/11/23 10:42am
Please explain how to use your widget, we can't guess

Ok, it wouldn't hurt to specify so users don't have to guess, that:

1) the file jqClEditor.php should go into the folder /protected/components/ 2) the folder cleditor should go into the folder /protected/widgets/

#2194 report it
petruza at 2010/11/23 10:35am
Alias "widgets.jqClEditor" is invalid

I use your sample code and Yii complains that Alias "widgets.jqClEditor" is invalid.

I placed the files in /protected/widgets/ and /yiiframework/zii/widgets/ with no luck. Also tried in extensions, and modified the Alias accordingly but again no luck.

where should I put the files or what route alias should I use?

#2070 report it
Antonio Ramirez at 2010/11/07 03:11pm
CWidget instance

You are right Sebas... This is more a Widget than other thing.

I will upload a CWidget version whenever I have time.

#2068 report it
sebas at 2010/11/07 12:59pm
It will be nice to make it a CWidget instance

But it is nice after all

Leave a comment

Please to leave your comment.

Create extension
Downloads