zoukankan      html  css  js  c++  java
  • (编辑器)Jquery-EasyUI集合Kindeditor编辑器

    1.在html里面添加

    list.html
    list.html
    
    (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();
                    },
                    afterBlur: function () { this.sync(); }
                };
                $.parser.plugins.push("kindeditor");
            })(jQuery, KindEditor);

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

    <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>

    调用方法:

    <textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 90%; height: 140px; visibility: hidden;">KindEditor</textarea>

    3.360浏览器不兼容,firefox浏览器正常,所以赋值方法
    KE.html(id, val)
    设置编辑器的HTML内容。
    参数:
    id:String,编辑器的ID
    val: String,HTML字符串
    返回值:无

    页面只有一个编辑器的话最新版本这样写就可以。
    KindEditor.html('#txtIntroduce', data.Introduce);

    loadFilter: function (data) {
                        $.post("../Action/newsList.ashx", { content: $('#easyui_ditor').val() }, function (data) {
                            
                            var json = eval("(" + data + ")");
                            //alert(json.news[0].Content)
                            //$('#easyui_ditor').val(json.news[0].Content);
                            KindEditor.html($('#easyui_ditor'), json.news[0].Content);
                            //console.info($('#easyui_ditor').val());
                        });
  • 相关阅读:
    error C2146: 语法错误 : 缺少“;”
    字符串大小写格式化
    Click Button关键字——模拟单击页面中的按钮
    Get List Items关键字——获取页面中一个下拉列表中的所有下拉框选项
    Get Title关键字——获取浏览器网页的title
    Click Link关键字——模拟单击一个链接
    Get Text关键字——用来获取文本内容
    Input Text关键字——模拟向一个输入框中输入文字内容
    Open Browser、Close Browser关键字——打开和关闭浏览器
    Go Back关键字、Go To关键字——浏览器的后退、前进操作
  • 原文地址:https://www.cnblogs.com/tangge/p/3830737.html
Copyright © 2011-2022 走看看