kindeditor编辑器的使用

Posted 2020-08-01 clear93

　　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.还有一些比如我刚开始做图片的时候碰到过图片无法上传的问题，找个其实在编辑器的文件里头修改的

 

好，暂时下你说这么多，如果大家还有问题可以加我博客左边的群，找到我！