现在的位置: 首页 > 综合 > 正文

多编辑器支持的实现方式

2012年08月04日 ⁄ 综合 ⁄ 共 3294字 ⁄ 字号 评论关闭

多编辑支持已知都不是什么复杂的问题,

主要的问题主要发生在于编辑器本身的尺寸不小, 如果同时加载将很耗资源, 并可能冲突。

如果通过在aspx页面内判断, 则又可能因为新增加编辑而修改代码。

为了解决这两个问题, 参考了接口的方式, 

为每个编辑制作一个调用的js并都继承(js动态,并不需要真正去继承)相同的接口。

参考常用功能,主要有以下几个接口4个接口:为el生成编辑器、为el删除编辑器,更新编辑器内容到el,往el插入内容(上传文件用)

代码如下: 

Interface

(function ($) {

$.extend({
Editor: {
Create: function (el) { },
Destroy: function (el) { },
Sync: function (el) { },
InsertHtml: function (el, result) { }
}
});

})(jQuery);

为每个编辑器做好接口以后, 只需要用lab.js(一个js异步框架),按配置调用各自接口即可,

最后, 附上几个编辑器制作好的接口,(针对tianvcms系统进行了处理, 仅供参考)

KingEditor

(function ($) {

    $LAB
        .script(Config.Paths.Editor + "kindeditor/kindeditor-min.js")
        .script(Config.Paths.Editor + "kindeditor/lang/zh_CN.js");

    var tools_mini = [
        'source', '|',
        'bold', 'italic', 'underline', '|',
        'fontname', 'fontsize', '|',
        'forecolor', 'hilitecolor', '|',
        'formatblock', 'insertorderedlist', '|',
        'preview', 'fullscreen'];
    var tools_normal = [
        'source', '|',
        'undo', 'redo', '|',
        'cut', 'copy', 'paste', 'plainpaste', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|',
        'link', 'unlink', 'anchor', '|',
        'template', 'hr', 'table', '/',
        'removeformat', '|',
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'fontname', 'fontsize', '|',
        'forecolor', 'hilitecolor', '|',
        'formatblock', 'insertorderedlist', '|',
        'preview', 'fullscreen'];

    function EditorCreate(el) {

        $LAB
            .script(Config.Paths.Editor + "kindeditor/kindeditor-min.js")
            .wait()
            .script(Config.Paths.Editor + "kindeditor/lang/zh_CN.js")
            .wait(function () {
                var miniMode = el.hasClass('input_editor_mini');
                var tools = miniMode ? tools_mini : tools_normal;

                KindEditor.basePath = Config.Paths.Editor + 'kindeditor/';
                var editor = KindEditor.create('#' + el.attr('id'), {
                    width: el.width(),
                    height: el.height(),
                    cssPath: Config.Editor.ContentsCss,
                    items: tools
                });
                el.data('editor', editor);
            });
    }

    function EditorDestroy(el) {
        var editor = el.data('editor');
        if (editor) {
            editor.remove();
            editor = null;
        }
    }

    function EditorInsertHtml(el, result) {
        var editor = el.data('editor');
        if (editor) {
            //editor.toggleSource( false );
            editor.insertHtml(result);
        }
    }

    function EditorSync(el) {
        var editor = el.data('editor');
        if (editor) {
            editor.sync();
        }
    }

    $.extend({
        Editor: {
            Create: EditorCreate,
            Destroy: EditorDestroy,
            Sync: EditorSync,
            InsertHtml: EditorInsertHtml
        }
    });

})(jQuery);
XhEditor

(function ($) {

    $LAB
        .script(Config.Paths.Editor + "xheditor/xheditor-1.1.13-zh-cn.min.js");

    var tools_mini = 'Source,|,Removeformat,|,Bold,Italic,Underline,|,Fontface,FontSize,|,FontColor,BackColor,|,Blocktag,List,|,Preview,Fullscreen';
    var tools_normal = 'Cut,Copy,Paste,Pastetext,|,Align,Outdent,Indent,|,Link,Unlink,Anchor,|,Hr,Table' + ',/,' +
        'Source,|,Removeformat,|,Bold,Italic,Underline,Strikethrough,|,Fontface,FontSize,|,FontColor,BackColor,|,Blocktag,List,|,Preview,Fullscreen';

    function EditorCreate(el) {

        $LAB
            .script(Config.Paths.Editor + "xheditor/xheditor-1.1.13-zh-cn.min.js")
            .wait(function () {
                var miniMode = el.hasClass('input_editor_mini');
                var tools = miniMode ? tools_mini : tools_normal;
                var editor = el.xheditor({
                    skin: 'nostyle',
                    tools: tools,
                    width: el.width(),
                    height: el.height(),
                    editorRoot: Config.Paths.Editor + 'xheditor/',
                    loadCSS: Config.Editor.ContentsCss
                });
                el.data('editor', editor);

            });
    }

    function EditorDestroy(el) {
        var editor = el.data('editor');
        if (editor) {
            el.xheditor(false);
        }
    }

    function EditorInsertHtml(el, result) {
        var editor = el.data('editor');
        if (editor) {
            editor.toggleSource(false);
            editor.pasteHTML(result);
        }
    }

    function EditorSync(el) {
        return;
    }

    $.extend({
        Editor: {
            Create: EditorCreate,
            Destroy: EditorDestroy,
            Sync: EditorSync,
            InsertHtml: EditorInsertHtml
        }
    });

})(jQuery);
CkEditor

抱歉!评论已关闭.