關于JqueryEasyUI集合Kindeditor

寫在前面

　　上一篇《初試JqueryEasyUI（附Demo）》；

　　在上一篇說過，下面要試下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   <textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 100%; height: 200px; visibility: hidden;">EasyUI集合KindEditor</textarea>      

　　如果你使用的是背景擷取設定kindeditor值的話可以使用這個，但是js擷取或設定文本框值，上面就不好實作，也試了很多方法沒有解決，有關js的大神如果知道方法還請賜教。

　　注意建立kindeditor的時候有個afterChange事件，表示更改編輯器的内容發生的事件，這邊需要重寫下。其實kindeditor不集合到easyui中也是可以使用，隻不過沒有上面這樣建立友善，做了個示例，大家可以看下：

1                 <tr>
 2                     <td>easyui-kindeditor編輯器:</td>
 3                     <td>
 4                         <textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 100%; height: 200px; visibility: hidden;">EasyUI集合KindEditor</textarea>
 5                         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="">設定</a>
 6                         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(KindEditor.html())">擷取</a>
 7                     </td>
 8                 </tr>
 9                 <tr>
10                     <td>kindeditor編輯器:</td>
11                     <td>
12                         <textarea name="txtContent" id="txtContent" style="width: 100%; height: 200px; visibility: hidden;">KindEditor</textarea>
13                         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="editor.html('我在設定KindEditor内容');">設定</a>
14                         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(editor.html())">擷取</a>
15                     </td>
16                 </tr>      

　　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下載下傳：http://pan.baidu.com/s/1c0zP6KC

作者：田園裡的蟋蟀

微信公衆号：你好架構

出處：http://www.cnblogs.com/xishuai/

公衆号會不定時的分享有關架構的方方面面，包含并不局限于：Microservices（微服務）、Service Mesh（服務網格）、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD（持續內建/持續部署）、DevOps等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

分享到：

QQ空間

新浪微網誌

騰訊微網誌

微信

更多