kindEditor用法

示例1：

http://www.360doc.com/content/15/0226/16/9085503_450996411.shtml   kindEditor用法

一、下载

    下载最新版本的kindEditor（官方网站kindeditor.net），下载后打开examples/index.html 就可以看到一排例子。

二、部署

    将解压后的文件包kindeditor-4.1.10里的asp asp.net jsp php这几个带有服务端脚本的文件夹删除，然后上传到你网站的相应目录中，在这里我假设放到了plugin目录。

三、嵌入

在需要加入编辑器的页面的HTML中导入

<link rel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css" />

<script charset="utf-8" src="/plugin/kindeditor-4.1.10/kindeditor-min.js"></script>

<script charset="utf-8" src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script>

 

然后添加一个输入框

<textarea id="editor_id" name="content"></textarea>

最后在加入一段JS

 

KindEditor.ready(function(K) {

　　window.editor = K.create('#editor_id',{

　　　　cssPath:'/public/plugin/editor/plugins/code/prettify.css',   // 代码样式表  多个支持数组['plugins/code/prettify.css', 'index.css']

　　　　uploadJson:'/upload/image.php',           // 编辑器图片组件上传地址

　　　　resizeType :1,

　　　　allowPreviewEmoticons : true,

　　　　allowImageUpload : true,

　　});

});

 

好了。到这里你应该已经可以看页面上的编辑器了。

这里我还要说的一点是  K.create的第一个参数就是前面textarea的ID，后面跟的JSON格式的数据保护了该编辑器的很多功能。

比如我代码上写的cssPath是代码样式表，uploadJson是编辑器的图片上传组件的上传地址。

说到上传地址，大家应该还记的在上传服务器之前我叫大家先删掉的几个文件夹吧，选择你的网站的开发语言的目录你可以看到如PHP目录下的upload_json.php文件，它里面主要写了接受图片上传的方法，大家可以改改自己用。后台部分的东西这里就不细讲了。

四、取值

      editor.html()方法来取值。 （异步：editor.sync()）

好了主要的用法介绍完了，它还有很多不常用功能，我就不说了，多看看例子我相信大家都会用的。

示例2：

https://www.cnblogs.com/xfstu/p/12099710.html

　　　　// init

      KindEditor.ready(function(K) {
            editor = K.create('textarea[name="content1"]', {
                uploadJson: 'upload_json.php',
                fileManagerJson: 'file_manager_json.php',
                allowFileManager: true,
                afterCreate: function() {
                    var self = this;
                    K.ctrl(document, 13, function() { // 按回车键
                        self.sync();// 同步数据，这步很重要
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {   // 按回车键
                        self.sync();  // 同步数据，这步很重要
                        K('form[name=example]')[0].submit();
                    });
                }
            });
            prettyPrint();
        });

        function btn() {
            editor.sync(); // 同步数据很重要
            html = document.getElementById('con').value; //原生API
            console.log(html);
        }

示例3：
https://blog.csdn.net/xiezhiyong3621/article/details/9614191

一、kindedtor中让编辑框默认为“HTML代码/源代码”模式
// 自定义插件 #1
KindEditor.lang({
  example1 : '插入HTML'

  });
  //  自定义插件 #2
  KindEditor.lang({
　　example2 : 'CLASS样式'
  });

  KindEditor.ready(function(K) {
　  　KindEditor.options.designMode = false;  //  设置成false即为打开是默认为源代码模式 （使用场景尚不清楚，怀疑和设置富文本的方式有关 designMode 和 contenteditable 有关）

　　  K.create('#content', {
　　　  　cssPath : ['plugins/code/prettify.css', 'index.css'],
　　　　  items : ['source', 'removeformat', 'code']
　　  });
  });