关于JqueryEasyUI集合Kindeditor

写在前面

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

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

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

实现

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

　　网上找到一段js代码：

(function ($, K) {
    if (!K)
        throw "KindEditor未定义!";

    function create(target) {
        var opts = $.data(target, 'kindeditor').options;
        var editor = K.create(target, opts);
        $.data(target, 'kindeditor').options.editor = editor;
    }

    $.fn.kindeditor = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.kindeditor.methods[options];
            if (method) {
                return method(this, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'kindeditor');
            if (state) {
                $.extend(state.options, options);
            } else {
                state = $.data(this, 'kindeditor', {
                        options : $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)
                    });
            }
            create(this);
        });
    }

    $.fn.kindeditor.parseOptions = function (target) {
        return $.extend({}, $.parser.parseOptions(target, []));
    };

    $.fn.kindeditor.methods = {
        editor : function (jq) {
            return $.data(jq[0], 'kindeditor').options.editor;
        }
    };

    $.fn.kindeditor.defaults = {
        resizeType : 1,
        allowPreviewEmoticons : false,
        allowImageUpload : false,
        items : [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
        afterChange:function(){
            this.sync();
        }
    };
    $.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);

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

  <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中也是可以使用，只不过没有上面这样创建方便，做了个示例，大家可以看下：

                <tr>
                    <td>easyui-kindeditor编辑器:</td>
                    <td>
                        <textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 100%; height: 200px; visibility: hidden;">EasyUI集合KindEditor</textarea>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="">设置</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(KindEditor.html())">获取</a>
                    </td>
                </tr>
                <tr>
                    <td>kindeditor编辑器:</td>
                    <td>
                        <textarea name="txtContent" id="txtContent" style="width: 100%; height: 200px; visibility: hidden;">KindEditor</textarea>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="editor.html('我在设置KindEditor内容');">设置</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(editor.html())">获取</a>
                    </td>
                </tr>

　　js代码：

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

　　效果：

　　完整示例Demo下载：http://pan.baidu.com/s/1c0zP6KC