多编辑器支持的实现方式
多编辑支持已知都不是什么复杂的问题,
主要的问题主要发生在于编辑器本身的尺寸不小, 如果同时加载将很耗资源, 并可能冲突。
如果通过在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