KindEditor rich text editor
1.KindEditor Introduction
Rich text editor, Rich Text Editor, referred to RTE, which provides editing functions similar to Microsoft Word, KindEditor is a set of open-source HTML visual editor, mainly for WYSIWYG editor allows users to get results on the site, compatible IE, Firefox, Chrome, Safari, Opera and other major browsers. Common rich text editor:
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
Features:
- Small size, fast loading speed, but the functionality is very rich.
Built-in custom range, perfectly support span tag.
Based on plug-way design, all functions are plug-ins, add custom extensions and very simple.
It is easy to modify the style editor, just modify a CSS file.
Supports most major browsers, such as IE, Firefox, Safari, Chrome, Opera
2. How to use
Related to the introduction of plug-js
<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>Binding rich text editor in the page
<textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>How rich text editor
1. Initialize kindeditor Editor
Add the page JS code used to initialize kindeditor
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
</script>- allowFileManager [whether to allow the browser to upload a file server] is the default value: false
2. Extract the contents of kindeditor editor
editor.html();
3. Empty the contents of the editor kindeditor
editor.html('');3. Use more
----------------------------------------------------------------------------------
allowFileManager 【是否允许浏览服务器已上传文件】
默认值是：false
------------------------------------------------------
allowImageUpload 【是否允许上传本地图片】
默认值是：true
----------------------------------------------
allowFlashUpload 【是否允许上传Flash】
默认值是：true
----------------------------------------------
allowMediaUpload 【是否允许上传多媒体文件】
默认值是：true
------------------------------------------------
pasteType 【设置粘贴类型】
0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴（默认）
---------------------------------------------------
resizeType 【设置可否改变编辑器大小】
0:不能改变 1:只能改变高度 2:宽度和高度都可以改变（默认）
----------------------------------------------------------
themeType 【主题风格】
可设置"default"、"simple"，指定simple时需要引入simple.css
-------------------------------------------------------------
-------------------------------------------------------------
designMode 【可视化模式或代码模式】
数据类型：Boolean
默认值是：true(可视化)
------------------------------------------
afterCreate:function(){} 【编辑器创建后】
afterCreate:function(){
//alert('创建完成');
} fontSizeTable develop [Text Size]
Data Type: Array
- Default: [ '9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
[colorTable color picker in the specified color value]
Data Type: Array
[
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
] Modify the default values
【Ctrl+Enter提交】
afterCreate:function(){
var self=this;
KindEditor.ctrl(self.edit.doc, 13, function() {
self.sync();
//执行其他事件
});
}
var editor=KindEditor.create(‘#nr’);
【编辑器获取焦点】
editor.focus();
【取得编辑器HTML内容】
var html=editor.html();
【取得编辑器纯文本内容】
var text=editor.text();
【移除编辑器】
editor.remove();
【设置编辑器HTML】
editor.html(‘<strong>编辑器内容</strong>’);
【设置编辑器纯文本内容，直接显示HTML代码】
editor.text(‘<strong>编辑器内容</strong>’);
【判断编辑器内容是否为空】
if(editor.isEmpty()){
alert(‘请输入内容’);
return false;
}
【将指定的HTML内容插入到编辑器区域里的光标处】
editor.insertHtml(‘<strong>插入内容</strong>’);
【将指定的HTML内容添加到编辑器区域的最后位置。】
editor.appendHtml(‘<strong>追加内容</strong>’);
【编辑器切换全屏模式】
editor.fullscreen();
【设置编辑器的只读状态】
editor.readonly(false); //true:只读，false:取消只读The latest version
Directory Structure
Quick
<textarea id="content_1" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea> <script type="text/javascript" charset="utf-8" src="/editor/kindeditor.js"></script> <script type="text/javascript"> KE.show({id : 'content_1'}); </script>
UEditor
1.UEditor Introduction
UEditor is "FEX front-end research and development team," developed by the Baidu WYSIWYG rich text web editor with lightweight, customizable, focusing on user experience and other characteristics, based on open source MIT license that allows free use and modify the code.
2. Fast Experience
Editor 2.1 download
UEditor official website: http://ueditor.baidu.com
UEditor API documentation: http: //ueditor.baidu.com/doc
UEditor Github Address: http: //github.com/fex-team/ueditor
2.2 Create a demo file
Unzip the downloaded package, create demo.html file in the directory decompressed, fill in the following html code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>2.3 demo.html open in a browser
If you see below this editor, Congratulations, initial deployment success!
2.4 Incoming custom parameters
Editor has many parameters customizable items, in the example of the time can be passed to the editor:
var ue = UE.getEditor('container', {
autoHeight: false
});CI may also be modified by ueditor.config.js document, see the specific configuration distal Parameter Description
2.5 set and read the contents editor
And through getContent setContent method may set and read the contents of the editor
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容，返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容，返回: hello
var txt = ue.getContentTxt();
});3. Common API
实例化编辑器到id为 container 的 dom 容器上：详细
var ue = UE.getEditor('container');
设置编辑器内容：详细
ue.ready(function() {
ue.setContent('<p>hello!</p>');
});
追加编辑器内容：详细
ue.ready(function() {
ue.setContent('<p>new text</p>', true);
});
获取编辑器html内容：详细
ue.ready(function() {
var html = ue.getContent();
});
获取纯文本内容：详细
ue.getContentTxt();
获取保留格式的文本内容：详细
ue.getPlainTxt();
获取纯文本内容：详细
ue.getContentTxt();
判断编辑器是否有内容：详细
ue.hasContents();
让编辑器获得焦点：详细
ue.focus();
让编辑器获得焦点
ue.blur();
判断编辑器是否获得焦点：详细
ue.isFocus();
设置当前编辑区域不可编辑：详细
ue.setDisabled();
设置当前编辑区域可以编辑：详细
ue.setEnabled();
隐藏编辑器：详细
ue.setHide();
显示编辑器：详细
ue.setShow();
获得当前选中的文本：详细
ue.selection.getText();
常用命令：详细
在当前光标位置插入html内容
ue.execCommand('inserthtml', '<span>hello!</span>');
设置当前选区文本格式：详细
ue.execCommand('bold'); //加粗
ue.execCommand('italic'); //加斜线
ue.execCommand('subscript'); //设置上标
ue.execCommand('supscript'); //设置下标
ue.execCommand('forecolor', '#FF0000'); //设置字体颜色
ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色
回退编辑器内容：详细
ue.execCommand('undo');
撤销回退编辑器内容：详细
ue.execCommand('redo');
切换源码和可视化编辑模式：详细
ue.execCommand('source');
选中所有内容：详细
ue.execCommand('selectall');
清空内容：详细
ue.execCommand('cleardoc');
读取草稿箱
ue.execCommand('drafts');
清空草稿箱
ue.execCommand('clearlocaldata');CKEditor
1 Introduction
By loading CKEditor from CDN to speed up your site :
- CKEditor hosted on servers around the world - script to load faster because they are provided to the end user from the nearest location.
- If you have already downloaded the same version of CKEditor (even on other sites), it is loaded from the cache.
- CDN reduces the number of HTTP requests processed by the server, it also speeds up!
2. CKEditor 4 of use
To start using CKEditor 4 on your website, please add a HTML page