写在前面

　　上一篇《》；

　　在上一篇说过，下面要试下easyui集合编辑器，关于编辑器网上有很多，ckeditor、ueditor、kindeditor、eWebEditor等，其实最早接触的是ckeditor（fckeditor），用着功能确实不错，但是感觉太复杂了，而且东西也比较大，不是很方便，ueditor是百度出品的，但是用过kindeditor之后发现感觉还是kindeditor比较好用点，个人感觉，勿喷！

　　kindeditor的示例也是比较全的，而且兼容性也比较好，就用它试着集合easyui了。

实现

　　因本人js技术有限，试了好久也没搞好，此处略去十万个字。。。

　　网上找到一段js代码：

1 (function ($, K) { 2     if (!K) 3         throw "KindEditor未定义!"; 4  5     function create(target) { 6         var opts = $.data(target, 'kindeditor').options; 7         var editor = K.create(target, opts); 8         $.data(target, 'kindeditor').options.editor = editor; 9     }10 11     $.fn.kindeditor = function (options, param) {12         if (typeof options == 'string') {13             var method = $.fn.kindeditor.methods[options];14             if (method) {15                 return method(this, param);16             }17         }18         options = options || {};19         return this.each(function () {20             var state = $.data(this, 'kindeditor');21             if (state) {22                 $.extend(state.options, options);23             } else {24                 state = $.data(this, 'kindeditor', {25                         options : $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)26                     });27             }28             create(this);29         });30     }31 32     $.fn.kindeditor.parseOptions = function (target) {33         return $.extend({}, $.parser.parseOptions(target, []));34     };35 36     $.fn.kindeditor.methods = {37         editor : function (jq) {38             return $.data(jq[0], 'kindeditor').options.editor;39         }40     };41 42     $.fn.kindeditor.defaults = {43         resizeType : 1,44         allowPreviewEmoticons : false,45         allowImageUpload : false,46         items : [47             'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',48             'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',49             'insertunorderedlist', '|', 'emoticons', 'image', 'link'],50         afterChange:function(){51             this.sync();52         }53     };54     $.parser.plugins.push("kindeditor");55 })(jQuery, KindEditor);

　　需要同时引用easyui和kindeditor相关样式和脚本，然后就可以像使用easyui组件一样使用kindeditor：

1   EasyUI集合KindEditor

　　如果你使用的是后台获取设置kindeditor值的话可以使用这个，但是js获取或设置文本框值，上面就不好实现，也试了很多方法没有解决，有关js的大神如果知道方法还请赐教。

　　注意创建kindeditor的时候有个afterChange事件，表示更改编辑器的内容发生的事件，这边需要重写下。其实kindeditor不集合到easyui中也是可以使用，只不过没有上面这样创建方便，做了个示例，大家可以看下：

1                  2                     easyui-kindeditor编辑器: 3                      4                         EasyUI集合KindEditor 5                         设置 6                         获取 7                      8                  9                 10                     kindeditor编辑器:11                     12                         KindEditor13                         设置14                         获取15                     16                 

　　js代码：

1         //编辑器 2         var editor; 3         KindEditor.ready(function (K) { 4             editor = K.create('textarea[name="txtContent"]', { 5                 allowFileManager: true, 6                 resizeType: 1, 7                 allowPreviewEmoticons: false, 8                 items: [ 9                     'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',10                     'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',11                     'insertunorderedlist', '|', 'emoticons', 'image', 'link']12             });13         });

　　效果：

　　完整示例Demo下载：