标签：
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息，包括演示、文档、下载等。
官网：http://kindeditor.net/demo.php
第一步：
将你需要的插件文件上传至你的项目。在你需要添加编辑器的位置加入textarea，注意ID在页面中是唯一的。
第二步：
创建编辑器函数。参考文档：
初始化参数：http://www.zzbaike.com/wiki/KindEditor/初始化参数
例：
function creatEditor(){
editor=KindEditor.create(‘textarea[id="id_name"]‘, {
参数：
}
}
常用参数：
1.pasteType：设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
数据类型: Int； 默认值: 2
2.resizeType：2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
数据类型: Int； 默认值: 2
3.uploadJson：指定上传文件的服务器端程序。
数据类型: String； 默认值: basePath + ‘php/upload_json.php’
4.afterUpload：上传文件后执行的回调函数。
数据类型: Function； 默认值: 无
KindEditor.ready(function(K) {
K.create(‘#id‘, {
afterUpload : function(url) {
alert(url);
}
});
});
5.items:配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
数据类型: Array；
默认值:
[
‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘cut‘, ‘copy‘, ‘paste‘,
‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,
‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,
‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘,
‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘,
‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘,
‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘map‘, ‘code‘, ‘pagebreak‘,
‘link‘, ‘unlink‘, ‘|‘, ‘about‘
]
6.cssData:指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。
数据类型: String； 默认值: 空
例如：cssData : ‘body {font-size:14px;font-family:"Microsoft Yahei";color:#666666;}‘,
7.afterBlur:编辑器失去焦点(blur)时执行的回调函数。
数据类型: Function； 默认值: 无
8.afterChange:编辑器内容发生变化后执行的回调函数。
数据类型: Function； 默认值: 无
（主要用途还是在编辑器文字限制。例如要设置编辑器最大输入字数为2000，那么在编辑器内容发生变化后字数就要跟随变化）
例：
html：还可输入<span id="leftNum">2000</span>字
js:afterChange : function() {
var num=2000-parseInt(this.count(‘text‘));//字数减去输入的文字，返回剩余字数
var numleft = num;//剩余字数重新赋给一个变量
num=num<0?0:num;//如果剩余字数小于0是true就为0，如果大于等于0就还是num
KindEditor(‘#leftNum‘).html(num);//取到存放剩余字数的标签讲剩余值num填入
if(numleft<0){//如果剩余字数小于0加入提示信息
if($("#company_intro").find(".red_tips").length==0){\
$("#company_intro").append(‘<span class="red_tips">超出2000字的限制</span>‘);
}
}else if(numleft>=0){//如果剩余字数大于等于0移除提示信息
$("#company_intro").find(".red_tips").remove();
}
}
第三步：
调用第二步创建的函数。
OK，这个编辑器已经在页面生成，显示了。
关于使用中遇到的问题我说一下：
1.上传插件的时候根据自己后端的语言选择对应的版本上传，没用的文件可以delete
2.编辑器生成之后的填入数据跟后端的交互，数据得取到赋给变量然后传给后端，通过editor.html()取到编辑框里头的数据，点保存之后调接口传值就可以了
3.还有一些比如我刚开始做图片的时候碰到过图片无法上传的问题，找个其实在编辑器的文件里头修改的
好，暂时下你说这么多，如果大家还有问题可以加我博客左边的群，找到我！
标签：
原文地址：http://www.cnblogs.com/clear93/p/5627690.html
