jqcleditor ClEditor jquery plugin for Yii

  1. Requirements
  2. Usage
  3. Resources

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

2 1
4 followers
1 521 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Tags: Editor, interface, jquery, wysiwyg
Developed by: Antonio Ramirez
Created on: Nov 6, 2010
Last updated: 13 years ago

Downloads

show all

Related Extensions