Premium Software
CLEditor - WYSIWYG HTML Editor

Getting Started

CLEditor is shipped with the following files. It is recommended that you install these files into a folder called cleditor with a subfolder called images.

When installing plugins, this same folder structure should be used. All javascript and style sheets go in the cleditor folder and all images go in the cleditor/images folder.

Table of Contents

Usage

CLEditor takes a standard html textarea element and turns it into a full featured rich text editor. To use CLEditor, just apply the cleditor method to a standard jQuery object containing the textarea elements you would like transformed. The textareas will be hidden and rich text editors will appear in their place. 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jquery.cleditor.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cleditor.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#input").cleditor();
      });
    </script>
  </head>
  <body>
    <textarea id="input" name="input"></textarea>
  </body>
</html>
Behind the scenes, an iframe is created, placed in design mode and kept in sync with the textarea. At any time, you can access the HTML content of the editor using the textarea value. The textarea is also available server-side for postbacks.

Optional Parameters

For more control, you can supply a number of optional parameters as in the following example. 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../jquery.cleditor.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cleditor.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#input").cleditor({
          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
                        [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                        ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                        ["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"
        });
      });
    </script>
  </head>
  <body>
    <textarea id="input" name="input"></textarea>
  </body>
</html>

The above optional parameter object supports the following properties and callbacks:

Properties

Callbacks

Defaults

Using the defaultOptions object, you can override any of the above properties or callbacks as follows: 

$.cleditor.defaultOptions.width = 200;
$.cleditor.defaultOptions.height = 100;
$("#input").cleditor();
Overrides done using the defaultOptions object apply to all new editors.

.cleditor(options) Method

Returns a jQuery object containing cleditor objects for the set of matched textarea elements. If the cleditor object does not exist for a matched textarea element, it will be created using the default options combined with the supplied options. This is the core method for creating and selecting cleditor objects.

Examples

cleditor Object

An editor is composed of a main div element used to hold a toolbar, a text area and an iframe. The toolbar can hold multiple groups which in turn hold multiple buttons.

The cleditor object is created and exposed using the .cleditor(options) method described above. It defines a single editor instance and supports the following properties and methods.

Properties

These properties should be considered readonly.

Methods

Note: All methods except sourceMode, selectedHTML and selectedText support chaining by returning the object they were executed on.

Events

$.cleditor Object

This object contains global properties and methods used to create custom plugins and override built in functionality.

Properties

See the optional parameters section above for a description of each property on the $.cleditor.defaultOptions object.
Each button definition contains the following properties. Any optional properties are undefined if not supplied.
  • .name - The internal name of the button.
  • .title - The tooltip to display when the user hovers their mouse over the button.
  • .css - A standard jQuery style css map used to define the button image (optional).
  • .image - The name of the image file (in the images folder) to display for the button (optional).
  • .stripIndex - When using an image strip, this property identifies the zero based index into the strip (optional).
  • .command - The design mode command associated with the button (optional).
  • .popupName - The name of the popup to display when the button is clicked (optional).
  • .popupContent - The content of the popup to display when the button is clicked (optional).
Each button definition also supports the following optional callbacks.
  • .getEnabled(data) - This handler is called when the enabled state of the button is needed and should return false to disable the button or true to enable it. If no value is returned, the button will be enabled.
  • .getPressed(data) - This handler is called when the pressed state of the button is needed and should return true to have the button appear pressed or false to have the button appear normal. If no value is returned, the button will appear normal.
  • .buttonClick(event, data) - This handler is called when the button is clicked. When the button does not display a popup, this handler should return false to prevent CLEditor from executing the command on the data object parameter. By default, CLEditor will execute the command using the value and useCSS properties found on the data parameter.
  • .popupClick(event, data) - This handler is called when an element in the popup is clicked and should return false to prevent CLEditor from executing the command on the data object parameter. By default, CLEditor will execute the command using the value and useCSS properties found on the data parameter.
The data object passed into the above callback functions contains the following properties.
  • .editor - The cleditor object containing the clicked button.
  • .button - The clicked button's div element.
  • .buttonName - The name of the clicked button.
  • .popup - The popup div element.
  • .popupName - The name of the button's popup.
  • .command - The design mode command associated with the button.
  • .value - The value associated with the design mode command.
  • .useCSS - A boolean value that forces the design mode command to generate CSS markup when possible.

Methods