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

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

  • 相关阅读:
    dos命令大全
    死亡之ping(Ping of Death)
    硬盘安装系统
    DataGrid实现逻辑分页
    DropDownList另一种写法
    DataGrid3
    DataGrid2
    hidden(隐藏域)
    sql合并列
    未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出
  • 原文地址:https://www.cnblogs.com/clear93/p/5627690.html
Copyright © 2011-2022 走看看