Download
User Rating: 2.4/5 ( 3 votes)
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.
Lightweight
CLEditor consumes less than 9K of total bandwidth and consists of the following files:
|
File |
Description |
Size |
GZipped |
|
jquery.cleditor.min.js |
CLEditor jQuery Plugin (minified) |
12,513B |
5,580B |
|
jquery.cleditor.css |
CLEditor Style Sheet |
1,433B |
513B |
|
buttons.gif |
CLEditor Toolbar Button Strip |
3,064B |
3,064B |
|
toolbar.gif |
CLEditor Toolbar Background |
68B |
68B |
|
Total |
16.68KB |
9.01KB |
Full Featured
CLEditor contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.
Cross Browser
CLEditor supports the following browsers on both the mac and pc: IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+. All testing is done using jQuery 1.4.2.
Extensible
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.
Source: premiumsoftware.net
1. INCLUDE CSS AND JS FILES
<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>
2. HTML
<textarea id="input" name="input"></textarea>
3. JAVASCRIPT
$(document).ready(function () { $("#input").cleditor(); });
4. OPTIONS
$("#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"
});
-
width - The editor width not including margins, borders or padding.
Tip Use 'auto' to treat the editor as a block element that fills it's container.
-
height - The editor height not including margins, borders or padding.
-
controls - A space seperated list of the controls in the toolbar.
-
colors - A space seperated list of the colors in the color popup.
-
fonts - A comma seperated list of the font names in the font popup.
-
sizes - A comma seperated list of the sizes in the font size popup.
-
styles - An array of styles in the style popup.
-
useCSS - A boolean value used to force CSS styling of HTML elements when possible.
-
docType - The document type to assign to the editor contents.
-
docCSSFile - The CSS file used to style the editor contents.
-
bodyStyle - The style to assign to the body of the editor contents.
5. CALLBACKS
-
.updateTextArea(html) - This handler is called by the .updateTextArea() method of the cleditor object to convert HTML into source code. This handler receives the internal iframe contents as the html parameter and should return the source code to store in the textarea.
-
.updateFrame(source) - This handler is called by the .updateFrame() method of the cleditor object to convert source code into HTML. This handler receives the textarea contents as the source parameter and should return the HTML to store in the internal iframe.
6. METHODS
-
.blurred(handler) - shortcut method used to bind the blurred event.
-
.blurred() - shortcut method used to trigger the blurred event.
-
.change(handler) - shortcut method used to bind the change event.
-
.change() - shortcut method used to trigger the change event.
-
.clear() - Clears the contents of the internal textarea and iframe.
-
.disable(disabled) - Disables or enables the editor. Pass in true to disable or false to enable.
-
.execCommand(command, value, useCSS, button) - Executes a design mode command using the supplied value. If useCSS is true, CSS will be used to style the markup when possible. If an error occurs during execution, a popup message will be displayed under the button or centered under the toolbar if button is omitted.
-
.focus() - Sets input focus to the editor.
-
.focused(handler) - shortcut method used to bind the focused event.
-
.focused() - shortcut method used to trigger the focused event.
-
.hidePopups() - Hide any popups currently showing in any editor.
-
.refresh() - Forces the editor to resize it's toolbar, textarea and iframe. This method should be called after initializing a hidden editor and making it visible, or after changing the the width, height or parent of the $main div element.
-
.select() - Selects the entire contents of the editor.
-
.selectedHTML() - Returns the editor's current selection as an HTML formatted string.
-
.selectedText() - Returns the editor's current text selection as a string.
-
.showMessage(message, button) - Displays a popup message under the button or centered under the toolbar if button is omitted.
-
.sourceMode() - Returns true if the editor is currently displaying source code or false when rich text is showing.
-
.updateFrame() - Updates the editor's internal iframe with its textarea contents.
-
.updateTextArea() - Updates the editor's textarea with its internal iframe contents.
7. EVENTS
-
blurred - This event is triggered whenever the editor looses focus.
-
change - This event is triggered whenever the contents of the editor have changed. Since change detection is done using the keyup and mouseup events, this event occurs frequently as the user types.
-
focused - This event is triggered whenever the editor gains focus.
JS Tutorial
