欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

easyui kindeditor 文本编辑器整合

程序员文章站 2024-01-28 14:33:40
...

jsp 页面引入easyui 和kindeditor 文件

 

kindeditor 文件:

 

<link rel="stylesheet" href="../resources/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="../resources/kindeditor/plugins/code/prettify.css" />
<script language="javascript" type="text/javascript" src="../resources/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../resources/kindeditor/plugins/code/prettify.js"></script>

 

然后把kindeditor当做easyui 插件整合

 

整合代码为:

 

(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 : 0,
        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();//这个是必须的,如果你要覆盖afterChange事件的话,请记得最好把这句加上.
        }
    };
    $.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);

 

 

最后再textarea 标签class属性设置为easyui-kindeditor即可,例如 :

<td style="vertical-align: top;text-align: right">新闻内容:</td>
   <td><textarea class="easyui-kindeditor" name="content" style="width:600px;height:400px;resize:none"></textarea></td>

 

注:

1.可将整合代码单独写一个js文件:例如 easyui-kindeditor.js

让后在jsp文件引入即可,例如:<script type="text/javascript" src="./js/easyui-kindeditor.js"></script>

2.保存数据库时包含html代码实际长度大于输入字数,内容格式也将保存,显示时格式也能体现。

 

相关标签: kindeditor