百度编辑器UEditor的插件开发.docVIP

百度编辑器UEditor的插件开发 1.概述 UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。 2.下载UEditor 截至2013.11.27，最新版本为1.3.5，下面是具体的相关文档的下载地址： 百度官网下载地址：/website/download.html#ueditor； 官方文档资料地址:/website/document.html； 官方API地址：/doc/。 3.源码包文件说明 从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示： ?_examples：编辑器的示例页面 ?dialogs：弹出对话框对应的资源和JS文件 ?themes：样式图片和样式文件 ?editor.config.js：编辑器的配置文件 ?editor.api.js：开发版的所有js文件导入 ?editor.all.js：使用版的所有js文件 ?lang：语言文件 ?jsp、net、php：涉及到服务器端操作的文件 ?third-party：第三方插件 4.部署和使用 UEditor可供普通用户使用，同时UEditor的插件机制也为二次开发者提供了自定义插件的开发。 1）在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录。 2）创建简单的编辑器实例，首先在html页面中准备一个dom容器，容器可以是textareaid=editor/textarea或divid=editor/div，也可以是scripttype=text/plainid=editor/script标签。 3）引入相关文件 1 2 3 4 5 scripttype=text/javascriptsrc=editor.config.js/script !--使用版-- !--scripttype=text/javascriptsrc=ueditor.all.js/script-- !--开发版-- scripttype=text/javascriptsrc=editor.api.js/script 4）创建编辑器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 scripttype=text/javascriptcharset=utf-8 //通过new操作符实例化编辑器对象 varmyEditor=newbaidu.editor.ui.Editor(); myEditor.render(editor);//渲染dom容器 //使用UE.getEditor(）实例化编辑器对象 varmyEditor=UE.getEditor(myEditor); //通过new操作符实例化编辑器对象并自定义配置项 varmyEditor=newbaidu.editor.ui.Editor({ toolbars:[//自定义工具栏 [FullScreen,Source,Undo,Redo] ], wordCount:false,//关闭字数统计 elementPathEnabled:false,//关闭elementPath initialFrameHeight:300//默认的编辑区域高度 }); myEditor.render(editor); //通过UE.getEditor(）实例化编辑器对象并自定义配置项 UE.getEditor(myEditor,{ toolbars:[//自定义工具栏 [FullScreen,Source,Undo,Redo] ], wordCount:false,//关闭字数统计 elementPathEnabled:false,//关闭elementPath initialFrameHeight:300//默认的编辑区域高度 }) /script 说明：使用textarea和scripttype=text/plain标签做渲染容器，可以在容器中设置编辑器初始化的内容，如： textareaid=editor编辑器初始化的内容/textarea； scripttype=text/plainid=myEditor编辑器初始化的内容/script； 但是如果使用div作为渲染容器，就不可以在标签里设置初始值，但可通过在创建编辑器的时候配置initialContent参数来设置初始值。 5.自定义插件的开发 5.1UEditor的整体架构 UEditor的架构设计采用了传统的分层架构模式，从低到高依次分为核心层、命令插件层和UI层这样三个低耦合的层次。 1)核心层提供了编辑器底层的一些方法和概念，如DOM树操作