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.还有一些比如我刚开始做图片的时候碰到过图片无法上传的问题,找个其实在编辑器的文件里头修改的
好,暂时下你说这么多,如果大家还有问题可以加我博客左边的群,找到我!