easyui编辑器(kindeditor-4.1.10)

Posted 2020-09-22 slgkaifa

//1  重写kindedit    -建一个js文件 easyui_kindeditor.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,
        uploadJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,
        fileManagerJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,
        items : [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘, ‘italic‘, ‘underline‘,  
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,  
‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘,‘fullscreen‘,‘wordpaste‘,‘source‘],
        afterChange:function(){
            this.sync();//这个是必须的,假设你要覆盖afterChange事件的话,请记得最好把这句加上.
        }
    };
    $.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);

//2   在页面引入  必要的文件   ——kindeditor-4.1.10能够在官方上下载到

<link href="../kindeditor-4.1.10/examples/index.css" rel="stylesheet" />
    <script src="../kindeditor-4.1.10/kindeditor.js"></script>
    <script src="../kindeditor-4.1.10/kindeditor-all.js"></script>
    <script src="../kindeditor-4.1.10/kindeditor-all-min.js"></script>
    <script src="../kindeditor-4.1.10/kindeditor-min.js"></script>
    <script src="../kindeditor-4.1.10/lang/zh_CN.js"></script>
    <script type="text/javascript"
        src="<%=request.getContextPath()%>/js/easyui_kindeditor.js"></script>

// 3   页面上用

<input id="content" name="content" class="easyui-kindeditor" style="width: 90%; height: 140px;visibility: hidden;" options="validType:‘length[0,500]‘" />

//编辑器

<script type="text/javascript">

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

</script>

// 4   dataGrid 改动时  赋值  编辑框仅仅能手动赋值    row-选中行的数据    content 编辑器id   填充内容row.content     KindEditor是我们上面重写kindedit是定义的名字

       

function editWxSendMessage(row){
    $("#win").window(‘open‘);
    $("#wxsendmessageInfoForm").form(‘clear‘);
    $("#wxsendmessageInfoForm").form("load", row);
    KindEditor.html(‘#content‘, row.content);
}