特效介绍
CLEditor 是一个开源的，基于jQuery的富文本编辑器，它提供了一个轻量级的，功能全面的、跨浏览器的，可扩展的，所见即所得的HTML富文本编辑器，可以很容易地添加到任何网站。效果图如下：
轻量级插件
CLEditor消耗小于9 k的总带宽.包括的文件如下：
| 文件名 | 描述 | 大小 | 压缩后大小 |
|---|---|---|---|
| jquery.cleditor.min.js | CLEditor jQuery Plug-in (minified) | 12,828B | 5,738B |
| jquery.cleditor.css | CLEditor Style Sheet | 1,475B | 563B |
| buttons.gif | CLEditor Toolbar Button Strip | 3,064B | 3,064B |
| toolbar.gif | CLEditor Toolbar Background | 68B | 68B |
| Total |
|
17.02KB | 9.21KB |
特性
除了标准的文本格式化特性发现在其他的所见即所得编辑器,CLEditor也含有丰富的下降对字体名称、大小起伏、风格、文本颜色和突出颜色。CLEditor允许您插入图片,超链接和水平的规则。
跨浏览器
CLEditor支持以下浏览器都在pc和mac:IE 6.0 + 1.5 +,Safari 4 FF +、Chrome和Opera 10 + 5 +。
使用方法
CLEditor附带下列文件。建议您安装这些文件到一个文件夹的子文件夹叫CLEditor与images。jquery.cleditor.min.js – jQuery Plug-in (minified)
jquery.cleditor.js – jQuery Plug-in (source)
jquery.cleditor.css – Style Sheet
images/buttons.gif – Toolbar Button Image Strip
images/toolbar.gif – Toolbar Background Image
当安装插件时，应使用相同的文件夹结构。所有的脚本和样式表放在cleditor文件夹和所有的图像在cleditor/images文件夹，否则插件会因为找不到文件而报错。
使用
CLEditor以一个标准的HTML textarea元素并把它变成一个全功能的富文本编辑器。使用CLEditor，刚刚申请CLEditor方法标准的jQuery对象包含文本元素你想改变。将隐藏的文本区域和文本编辑器会出现在他们的地方。
<html>
<head>
<link rel="stylesheet" href="jquery.cleditor.css" />
<script src="jquery.min.js"></script>
<script src="jquery.cleditor.min.js"></script>
<script>
$(document).ready(function () { $("#input").cleditor(); });
</script>
</head>
<body>
<textarea id="input" name="input"></textarea>
</body>
</html>
在幕后，一个iframe被创建，放在设计模式和保持与此同步。在任何时候，你可以访问内容的html编辑器使用此值。该文本也可发送到服务器保存。实用自定义参数
为了进行更多的控制，您可以提供一些可选参数，如下面的示例。
<html>
<head>
<link rel="stylesheet" href="../jquery.cleditor.css" />
<script src="jquery.min.js"></script>
<script src="jquery.cleditor.min.js"></script>
<script>
$(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>
上述可选参数对象支持以下特性和回调：属性
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.
回调函数
.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.
默认值
使用defaultOptions对象，你可以重写上述任何属性或回调函数，就像下面的方式下：
$.cleditor.defaultOptions.width = 200;
$.cleditor.defaultOptions.height = 100;
$("#input").cleditor();
覆盖defaultOptions对象适用于所有新的编辑。.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
$("#input").cleditor({width:500, height:250});
$("textarea").cleditor();
var editor = $("#input").cleditor()[0];
var $editors = $("textarea").cleditor();
cleditor ObjectAn 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.
.$area – The textarea wrapped in a jQuery object.
.$frame – The iframe wrapped in a jQuery object.
.$main – The main div wrapped in a jQuery object – When moving an editor, this is the DOM element to re-parent.
.$toolbar – The toolbar div wrapped in a jQuery object.
.disabled – True if the editor is currently disabled; otherwise false.
.doc – The document object currently being edited in the iframe.
.options – The options used to create the editor.
Methods
Note: All methods except sourceMode, selectedHTML and selectedText support chaining by returning the object they were executed on.
.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.
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.
$.cleditor Object
This object contains global properties and methods used to create custom plug-ins and override built in functionality.
Properties
.defaultOptions – Contains the default optional parameter values used in the creation of new editors.
See the optional parameters section above for a description of each property on the $.cleditor.defaultOptions object.
.buttons – An array object containing the button definitions used to construct the editor.
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
.imagesPath() – Returns the path to the images folder including the trailing slash.
自定义插件
CLEditor允许您通过添加新的工具栏按钮提供属性和方法扩大其基地功能，取代现有的工具栏按钮，创建自定义的弹出窗口和应对按钮，弹出点击事件。此功能可以捆绑成一个单一的JavaScript插件文件。
在写作基本上插头包括创建或重新定义按钮和弹出窗口，处理点击事件和执行文件上的一些行动。
这是一个简单的Hello World的插件，增加了一个新的按钮，会弹出一个提示一个名字。当点击提交按钮时，一些HTML插入文档在当前插入符号位置。
(function($) {
// Define the hello button
$.cleditor.buttons.hello = {
name: "hello",
image: "hello.gif",
title: "Hello World",
command: "inserthtml",
popupName: "hello",
popupClass: "cleditorPrompt",
popupContent: "Enter your name:<br><input type=text size=10><br><input type=button value=Submit>",
buttonClick: helloClick
};
// Add the button to the default controls before the bold button
$.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls
.replace("bold", "hello bold");
// Handle the hello button click event
function helloClick(e, data) {
// Wire up the submit button click event
$(data.popup).children(":button")
.unbind("click")
.bind("click", function(e) {
// Get the editor
var editor = data.editor;
// Get the entered name
var name = $(data.popup).find(":text").val();
// Insert some html into the document
var html = "Hello " + name;
editor.execCommand(data.command, html, null, data.button);
// Hide the popup and set focus back to the editor
editor.hidePopups();
editor.focus();
});
}
})(jQuery);
相关链接项目地址：http://premiumsoftware.net/cleditor
Github地址：https://github.com/cleditor/cleditor