jqeditor-svn343.zip

jqeditor-svn343.zip ################ ### 功能列表 ### ################ 1、系统功能： 加粗、斜体、下划线、删除线、左对齐、右对齐、中介对齐 增加缩进、减少缩进、有序列表、无序列表、下标、上标 2、基础功能： 字体、字号、撤销、重做、源码、删除格式、插入图片、表格、字体颜色、背景颜色 插入多媒体文件、链接、特殊符号 3、定制功能： 一级目录、二级目录、内链、参考资料、快捷菜单 4、其他功能： 异步加载、全屏编辑、右键菜单、地图 #################### ### 目录结构 ### #################### - src |- lang |- zh-cn.js |- en.js |- ... |- core.js |- icons.js |- mod |- mod.*.js |- plugin |- plugin.*.js - jqeditor.min.js - style |- spacer.gif |- icon_mce.gif |- content_default.css - skins |- mce.css #################### ### 要 求 ### #################### 1.代码结构要清晰，业务代码和逻辑分离，方便开发和维护； 2.方便扩展； 3.功能定制性强、满足多种需求； 4.兼容性好； 5.可以同时存在多个编辑器； 6.不常用的多个插件代码可以整合为一个文件，延迟加载， 不常用且代码量很多的个别插件可以在首次使用时加载， 7.增加编辑器事件机制，事件过程可以分为初始化阶段、编辑器加载完成阶段、命令触发时段等。 模块可以向各个时段注册需要执行的代码，通过此模式降低核心和模块的耦合度。 避免在核心代码但这直接调用模块代码， 如在核心方法中使用 E.mod('Panel').set() 等就是增加了耦合性。 8.模块、插件支持热插拔； #################### ### 代码组织方式 ### #################### 代码主要指js代码，大致分三部分：核心、模块、插件，核心文件是一个core.js， 为了方便开发和维护，每个模块或插件都是一个独立的js文件。 核心：编辑器框架，不包含具体功能，所有功能通过模块或插件形式进行扩展； 模块：会重复使用的功能，不会对应具体的按钮； 插件：唯一功能 #################### ### 　开发计划　 ### #################### 1、核心框架 core.js 2、主要模块 E.mod("Confirm") E.mod("Panel") E.mod("History") E.mod("Event") E.mod("Toolbar") E.mod("Data") E.mod("Selection") ... 3、主要插件 Redo, Undo Font Image Link ForeColor,BackColor Source,PasteText PasteWord Save AutoHeight ... #################### ### 　开发插件　 ### #################### 开发插件是相当简单的事情，插件分为有界面插件和无界面插件，无界面的插件会更简单一些，如撤销、重做、表格操作等插件。 1、无界面插件，以plugin.history.js为例，仅需要一个click方法即可 (function(E){ var Consts = E.consts; E.plugin("Redo,Undo", { click: function( Panel, self, target ){ var name = self.name, History=E.mod("History"); if (History){ History[name]( ); }else{ E.execCommand(name); } return 1; } }); })(jQEditor); 2、有界面插件，以plugin.link.js为例 /** * 超链接插件 * 请注意插件会继承 Base_Plugin 的属性，在core.js当中定义，界面插件需要设置config属性、init方法、get方法。 */ (function(E){ var Consts = E.consts; E.plugin("Link", { config: { //面板宽度 width:320 }, init: function( self ){ //fill="Selection" //指定此属性后，会自动将编辑器中选中的文字赋值到此文本框 self.cache['html'] = 'html.....'; }, /** * 返回要插入到编辑器的html代码 */ get: function( panel, self ){ var v = self.getValues( panel ), html=''; if( v.text && v.url ){ html = '<a href="'+v.url+'" target="'+v.target+'">'+v.text+'</a>'; }else if( !v.text ){ self.error( '请输入超链接文字' ); }else if( !v.url ){ self.error( '请输入超链接网址' ); } return html } }); })(jQEditor);