zoukankan      html  css  js  c++  java
  • 【杂记】KindEditor 4.x 在线编辑器常用使用方法

    要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
    ----------------------------------------------------------------------
    jQuery方式创建编辑器
    KindEditor.create('#nr'); //绑定指定ID。
    HTML部分
    <textarea id="nr" style="680px;height:280px;visibility:visible"></textarea>
    ----------------------------------------------------------------------------------
    allowFileManager 【是否允许浏览服务器已上传文件】
    默认值是:false
    ------------------------------------------------------
    allowImageUpload 【是否允许上传本地图片】
    默认值是:true
    ----------------------------------------------
    allowFlashUpload 【是否允许上传Flash】
    默认值是:true
    ----------------------------------------------
    allowMediaUpload 【是否允许上传多媒体文件】
    默认值是:true
    ------------------------------------------------
    pasteType 【设置粘贴类型】
    0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴(默认)
    ---------------------------------------------------
    resizeType 【设置可否改变编辑器大小】
    0:不能改变  1:只能改变高度  2:宽度和高度都可以改变(默认)
    ----------------------------------------------------------
    themeType 【主题风格】
    可设置"default"、"simple",指定simple时需要引入simple.css
    -------------------------------------------------------------
    designMode 【可视化模式或代码模式】
    数据类型:Boolean
    默认值是:true(可视化)
    ------------------------------------------
    afterCreate:function(){} 【编辑器创建后】
    afterCreate:function(){
     //alert('创建完成');
    }
    ------------------------------------------
    fontSizeTable 【制定文字大小】
    数据类型:Array
    默认值:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
    -----------------------------------------------------------------------
    colorTable 【指定取色器里的颜色值】
    数据类型:Array
    [
            ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
            ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
            ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
            ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
    ]
    上面是默认值
    ----------------------------------------------------------------------------------
    【Ctrl+Enter提交】
    afterCreate:function(){
     var self=this;
     KindEditor.ctrl(self.edit.doc, 13, function() {
      self.sync();
      //执行其他事件
     });
    }
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    var editor=KindEditor.create('#nr');
    【编辑器获取焦点】
    editor.focus();
    【取得编辑器HTML内容】
    var html=editor.html();
    【取得编辑器纯文本内容】
    var text=editor.text();
    【移除编辑器】
    editor.remove();
    【设置编辑器HTML】
    editor.html('<strong>编辑器内容</strong>');
    【设置编辑器纯文本内容,直接显示HTML代码】
    editor.text('<strong>编辑器内容</strong>');
    【判断编辑器内容是否为空】
    if(editor.isEmpty()){
     alert('请输入内容');
     return false;
    }
    【将指定的HTML内容插入到编辑器区域里的光标处】
    editor.insertHtml('<strong>插入内容</strong>');
    【将指定的HTML内容添加到编辑器区域的最后位置。】
    editor.appendHtml('<strong>追加内容</strong>');
    【编辑器切换全屏模式】
    editor.fullscreen();
    【设置编辑器的只读状态】
    editor.readonly(false);   //true:只读,false:取消只读
    ==================================================================================
    【浏览服务器】选择已上传的文件
    ① 必须先引用编辑器的default.css文件
    <link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
    ② 必须引用一下两个JavaScript文件
    <script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
    <script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
    ③ 具体实现方法
    <script type="text/javascript">
    $(function(){
     var editor = KindEditor.editor();
     $('#filemanager').click(function() {
      editor.loadPlugin('filemanager', function() { //加载插件
       editor.plugin.filemanagerDialog({
        viewType : 'VIEW', //显示方式,有两种分别是VIEW(缩略图)和LIST(详细信息)
        dirName : 'image',
        //选择查看的指定文件夹下的文件【包括子目录下的文件】,默认只能是image,flash,media,file四种,如需添加自定义文件夹,可修改例如:asp/file_manager_json.asp文件第40行。
        clickFn : function(url, title) { //选择完文件后执行下面的代码
         $('#url').val(url);
         editor.hideDialog(); //隐藏浏览服务器对话框
        }
       });
      });
     });
    });
    </script>
    ----------------------------------------------------------------------------------------------------------------------
    【上传本地文件到服务器】
    ① 引用CSS文件
    <link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
    ② 引用编辑器JavaScript文件
    <script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
    ③ 具体实现方法
    <script type="text/javascript">
    $(function(){
     var uploadbutton = KindEditor.uploadbutton({
      button : KindEditor('#upload'), //注意此处,不能使用jQuery的$
      fieldName : 'imgFile',  //不要修改
      url : '../Editor/asp/upload_json.asp?dir=file',
      //上传处理程序页面,dir参数有四种:flash,media,file,其他(图片),上传后缀限制可修改程序页面代码,如:upload_json.asp
      afterUpload : function(data) {
       if (data.error === 0) {
        var url = KindEditor.formatUrl(data.url, 'absolute');
        $('#url').val(url);
       } else {
        alert(data.message);
       }
      },
      afterError : function(str) {
       alert('上传发生错误!');
       //如果需要显示错误信息,可设置如alert('发生错误:'+str);,如不需显示可将上面str删除
      }
     });
     uploadbutton.fileBox.change(function(e) {
      uploadbutton.submit();
     });
    });
    </script>
    ----------------------------------------------------------------------------------------------------------------------
    【上传图片】包括选择服务器已上传的图片
    ① 引用CSS文件
    <link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
    ② 引用编辑器JavaScript文件
    <script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
    ③ 引用语言包文件,必须的
    <script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
    ④ 具体实现方法
    <script type="text/javascript">
    $(function(){
     var editor = KindEditor.editor({
      allowFileManager : true  //允许选择已上传的图片
     });
     $('#image').click(function() {
      editor.loadPlugin('image', function() {
       editor.plugin.imageDialog({
        imageUrl : $('#url').val(),
        clickFn : function(url, title, width, height, border, align) {
         $('#url').val(url); //可使用其他参数。
         editor.hideDialog();
        }
       });
      });
     });
    });
    </script>
  • 相关阅读:
    工作中遇到的java 内存溢出,问题排查
    java线上内存溢出问题排查步骤
    性能测试-java内存溢出问题排查
    164 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 04 终止finally执行的方法
    163 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 03 使用多重catch结构处理异常
    162 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 02 使用try-catch结构处理异常
    161 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 01 try-catch-finally简介
    160 01 Android 零基础入门 03 Java常用工具类01 Java异常 03 异常处理简介 01 异常处理分类
    159 01 Android 零基础入门 03 Java常用工具类01 Java异常 02 异常概述 02 异常分类
    158 01 Android 零基础入门 03 Java常用工具类01 Java异常 02 异常概述 01 什么是异常?
  • 原文地址:https://www.cnblogs.com/edielei/p/2246450.html
Copyright © 2011-2022 走看看