kindeditor编辑器的使用

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

 

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

 

posted @ 2016-06-29 17:34  程序猿凯  阅读(1036)  评论(0编辑  收藏  举报