百度编辑器Editor的插件开发Word格式文档下载.docx

1、12345text/javascriptsrc=editor.config.js!-使用版-开发版-editor.api.js4）创建编辑器67891011121314151617181920212223242526272829charset=utf-8/通过new操作符实例化编辑器对象varmyEditor=newbaidu.editor.ui.Editor（）;myEditor.render（editor）;/渲染dom容器/使用UE.getEditor（）实例化编辑器对象varmyEditor=UE.getEditor（myEditor/通过new操作符实例化编辑器对象并自定义配置项va

2、rmyEditor=newbaidu.editor.ui.Editor（toolbars:/自定义工具栏FullScreen,SourceUndoRedo,wordCount:false,/关闭字数统计elementPathEnabled:false,/关闭elementPathinitialFrameHeight:300/默认的编辑区域高度）;/通过UE.getEditor（）实例化编辑器对象并自定义配置项UE.getEditor（,）说明：使用和标签做渲染容器，可以在容器中设置编辑器初始化的内容，如：编辑器初始化的内容；myEditor但是如果使用div作为渲染容器，就不可以在标签里设置初

3、始值，但可通过在创建编辑器的时候配置initialContent参数来设置初始值。5.自定义插件的开发5.1UEditor的整体架构UEditor的架构设计采用了传统的分层架构模式，从低到高依次分为核心层、命令插件层和UI层这样三个低耦合的层次。1）核心层提供了编辑器底层的一些方法和概念，如DOM树操作、Selection、Range等；2）在核心层之上覆盖的是命令插件层；3）在命令插件层之上则是UI层。5.2UEditor的插件机制从根本上来说，除了核心提供的几个编辑器底层封装类之外，UEditor的全部功能都是通过外挂插件或者是命令（实质上也可以看成特殊的插件）来实现的。UEditor中插

4、件的实质是在编辑器实例下面绑定的一个以插件名字命名的函数，然后通过编辑器实例化过程去执行这个函数，并将实例对象传递到插件内部作为其this对象来完成所有的功能操作。5.3自定义插件的开发1）在editor.config.js配置文件中的toolbars项添加插件名，如分页插件：zpagebreak，toolbars:.,zpagebreak；2）在editor.config.js配置文件中的labelMap项添加鼠标移入插件提示文字：labelMap:.,:分页；3）在_src/ui/editorui.js文件中的命令按钮项btnCmds添加插件名：btnCmds=.,;4）插件内部结构UE.

5、plugins=function（）varme=this;/注册鼠标和键盘事件me.addListener（mousedown,_mouseDownEvent）;keydown,function（type,evt）.）;mouseup,function（）;/查询当前命令状态queryCommandState:function（cmdName）/命令执行主体exeCommand:function（cmdName,myobject）/获取命令执行结果queryCommandValue:;5）插件具体写法/editor.selection.getRange（）获取选取/editor类，此类用于初始

6、化的一些设置，比如获取内容，设置高宽，设置编辑器内容等等。/domUtils类，Dom操作工具包。/utils类，静态工具函数包/browser类，此类用于检测浏览器。/EventBase类，此类用基础事件的注册类，比如鼠标，键盘事件等。/ajax类，此类用于ajax工具类。示例1：命令式插件1（分页）UE.plugins=function（）mands=execCommand:function（cmdName,myobject）/命令执行主体略分页命令插件的执行主体用到的方法大体如下：1）获取选区varrange=me.selection.getRange（）;2）往选区插入分页标识：var

7、pageBreakMark=this.document.createElement（spanUE.dom.domUtils.setAttributes（pageBreakMark,stylepage-break-after:always;range.insertNode（pageBreakMark）;3）根据分页标识分割内容varcontent=me.getContent（）,pageBreakPos=content.indexOf（always）,prevContent=content.substring（0,pageBreakPos-13）,nextContent=content.subs

8、tring（pageBreakPos+27）;me.setContent（prevContent）;/给当前编辑器对象设置新内容/给新编辑器设置内容，需监听新编辑器的ready事件，否则会报错/varneweditor=.;获取新编辑器实例方法此处略neweditor.addListener（ready,function（type,evt）this.setContent（nextContent）;4）销毁编辑器currentEditor.destroy（）;5）给插件按钮设置样式（每个工具栏按钮都会有一个edui-for-加插件名的样式类名，如分页命名插件的样式类名：edui-for-zpag

9、ebreak）。addStyle（.edui-default.edui-toolbardiv.edui-for-zpagebreak.edui-icon+background:url（图片路径）centerno-repeat;示例2：命令式插件2（插入批注）zcomment插入批注命令插件用到的方法大体如下：1）创建要插入的字符串varcreatInsertStr=function（uName,time,toCode）return!toCode?spanclass=z-edui-commentcontenteditable=falseedui-comment=true_uname=+uName

10、+_time=+time+spancontenteditable=请在此输入批注-+uName+time+ititle=删除批注/icke_commentedui-comment=i/cke_comment;2）代码视图和设计视图切换时进行相应元素节点的替换varswitchImgAndCode=function（root,img2Code）UE.utils.each（root.getNodesByTagName（img2Code?cke_comment）,function（node）if（node.getAttr（edui-comment）varhtml=creatInsertStr（nod

11、e.getAttr（_uname）,node.getAttr（_time）,img2Code）;node.parentNode.replaceChild（UE.uNode.createElement（html）,node）;3）设计视图转为源码视图的规则me.addOutputRule（function（root）switchImgAndCode（root,true）;/源码视图转为设计视图的规则me.addInputRule（function（root）switchImgAndCode（root）;4）给插件对象添加样式规则me.ready（function（）UE.utils.cssRul

12、e（.z-edui-commentbackground:url（+me.options.UEDITOR_HOME_URLthemes/default/images/icon_comment.gif）no-repeat0center#ff0;border:1pxdotted#fc3;display:inline-block;padding-left:18px;color:#cb9;font-weight:normal;.z-edui-commentspancolor:#320;.z-edui-commenticursor:pointer;font-size:16px;line-height:12

13、px;bold;#C00;padding:2px2px0;,me.document）;5）给插件按钮设置样式.edui-default.edui-toolbardiv.edui-for-zcomment.edui-icon示例3：弹出框式插件（插入图片）zimage弹出框式插件的执行主体用到的方法大体如下：1）实例化弹出框对象dialog，以及相关配置注：其中dialog宽高配置项由于开发包并未提供，所以需要用户自行扩展，更改源文件_src/ui/dialog.js，此处省略。30313233343536373839404142434445464748495051525354555657585

14、960varurl=./弹出框文件路径vardialog=newUE.ui.Dialog（editor:me,iframeUrl:url,width:800,height:450,title:插入图片,buttons:className:edui-okbuttonlabel:me.getLang（okonclick:function（）dialog.onok（true）;,edui-cancelbuttoncanceldialog.close（false）;dialog.open（）;dialog.onok=function（）vardgSelf=this,currentEditor=this

15、.editor,dialogWin=document.getElementById（this.id+_iframe）.contentWindow,source=dialogWin.$NV（Sourcetitle=imageLink=rela=if（source=upload）/本地上传图片dialogWin.uploadSave（function（response）vardt=response.DT;if（dt&dt.Rows）varrs=dt.Rows;for（vari=0;ispan/获取元素节点range.selectNodeContents（$el.get（0）.select（）;/选中元素文章源于泽元软件知识库，此文章只用于学术交流，不用于商业应用。