百度編輯器Editor的插件開發(fā)

1、百度編輯器UEditor 的插件開發(fā)1 .概述UEditor 是由百度 web 前端研發(fā)部開發(fā)的所見即所得富文本web 編輯器，具有輕量、可定制、注重用戶體驗(yàn)等特點(diǎn)，開源基于BSD 協(xié)議，允許自由使用和修改代碼。2 . 下載 UEditor截至 2013.11.27 ，最新版本為 1.3.5 ，下面是具體的相關(guān)文檔的下載地址：百度官網(wǎng)下載地址： ；官方文檔資料地址:；官方 API 地址： 。3 . 源碼包文件說(shuō)明從官網(wǎng)上下載完整源碼包，解壓到任意目錄，解壓后的源碼目錄結(jié)構(gòu)如下所示：?_examples ：編輯器的示例頁(yè)面?dialogs :彈出對(duì)話框?qū)?yīng)的資源和JS文件?themes ：樣式圖

2、片和樣式文件?editor.config.js ：編輯器的配置文件?editor.api.js ：開發(fā)版的所有js 文件導(dǎo)入?editor.all.js ：使用版的所有js 文件?lang ：語(yǔ)言文件?jsp、net、php :涉及到服務(wù)器端操作的文件 ?third-party :第三方插件4 .部署和使用UEditor可供普通用戶使用，同時(shí)UEditor的插件機(jī)制也為二次開發(fā)者提供了自定義插件的開發(fā)。1）在項(xiàng)目的任一文件夾中建立一個(gè)用于存放UEditor相關(guān)資源和文件的目錄。2）創(chuàng)建簡(jiǎn)單的編輯器實(shí)例，首先在 html頁(yè)面中準(zhǔn)備一個(gè)dom 容器，容器可以是<textareaid=&quo

3、t;editor"></textarea>或 <divid="editor"></div>, 也可以是<scripttype="text/plain"id="editor"></script>標(biāo)簽。3）引入相關(guān)文件1 <scripttype="text/javascript"src="editor.config.js"></script>2<!-使用版->3 <!-<scr

4、ipttype="text/javascript"src="ueditor.all.js"></script>->4<!-開發(fā)版->5 <scripttype="text/javascript"src="editor.api.js"></script>4）創(chuàng)建編輯器1 <scripttype="text/javascript"charset="utf-8">234567891011121314151617

5、/通過new操作符實(shí)例化編輯器對(duì)象varmyEditor=newbaidu.editor.ui.Editor();myEditor.render('editor');渲染 dom 容器使用UE.getEditor()實(shí)例化編輯器對(duì)象varmyEditor=UE.getEditor('myEditor');通過new操作符實(shí)例化編輯器對(duì)象并自定義配置項(xiàng)varmyEditor=newbaidu.editor.ui.Editor(toolbars:"自定義工具欄'FullScreen','Source','Undo&#

6、39;,'Redo',wordCount:false,/關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)elementPathEnabled:false,/ 關(guān)閉 elementPath initialFrameHeight:300默認(rèn)的編輯區(qū)域高度);18myEditor.render('editor');1920 通過UE.getEditor()實(shí)例化編輯器對(duì)象并自定義配置項(xiàng)21 UE.getEditor('myEditor',22 toolbars:"自定義工具欄23 'FullScreen','Source','Undo&#

7、39;,'Redo'24 ，25 wordCount:false,/關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)26 elementPathEnabled:false,/ 關(guān)閉 elementPath27 initialFrameHeight:300默認(rèn)的編輯區(qū)域高度28 )29 </script>說(shuō)明：使用<textarea> 和<scripttype="text/plain">標(biāo)簽做渲染容器，可以在容器中設(shè)置編輯器初始化的內(nèi)容，如：<textareaid="editor">編輯器初始化的內(nèi)容 </textarea

8、> ；<scripttype="text/plain"id="myEditor">編輯器初始化的內(nèi)容 </script> ;但是如果使用div作為渲染容器，就不可以在標(biāo)簽里設(shè)置初始值，但可通過在創(chuàng)建編輯器的時(shí)候配置initialContent參數(shù)來(lái)設(shè)置初始值。30 自定義插件的開發(fā)30.1 Editor 的整體架構(gòu)UEditor 的架構(gòu)設(shè)計(jì)采用了傳統(tǒng)的分層架構(gòu)模式， 從低到高依次分為核心層、 命令插件層和 UI 層這樣三個(gè)低耦合的層次。1） 核心層提供了編輯器底層的一些方法和概念，如DOM 樹操作、 Selection 、

9、Range 等；2）在核心層之上覆蓋的是命令插件層；3）在命令插件層之上則是UI 層。30.2 Editor 的插件機(jī)制從根本上來(lái)說(shuō)， 除了核心提供的幾個(gè)編輯器底層封裝類之外， UEditor 的全部功能都是通過外掛插件或者是命令（實(shí)質(zhì)上也可以看成特殊的插件）來(lái)實(shí)現(xiàn)的。 UEditor 中插件的實(shí)質(zhì)是在編輯器實(shí)例下面綁定的一個(gè)以插件名字命名的函數(shù)， 然后通過編輯器實(shí)例化過程去執(zhí)行這個(gè)函數(shù)，并將實(shí)例對(duì)象傳遞到插件內(nèi)部作為其this 對(duì)象來(lái)完成所有的功能操作。30.3 自定義插件的開發(fā)1） 在 editor.config.js 配置文件中的 toolbars 項(xiàng)添加插件名，如分頁(yè)插件： zpage

10、break ， toolbars:.,'zpagebreak'；2） 在 editor.config.js 配 置 文 件 中 的 labelMap 項(xiàng) 添 加 鼠 標(biāo) 移 入 插 件 提 示 文 字 ： labelMap:.,'zpagebreak':'分頁(yè) ' ；3） 在 _src/ui/editorui.js 文 件 中 的 命 令 按 鈕 項(xiàng) btnCmds 添 加 插 件 名 ： btnCmds=.,'zpagebreak' ；4）插件內(nèi)部結(jié)構(gòu)1 UE.plugins=function()2 varme=this;3/注

11、冊(cè)鼠標(biāo)和鍵盤事件4 me.addListener('mousedown',_mouseDownEvent);5me.addListener('keydown',function(type,evt).);6me.addListener('mouseup',function();7 /查詢當(dāng)前命令狀態(tài)8 queryCommandState:function(cmdName)9 /命令執(zhí)行主體10 exeCommand:function(cmdName,myobject)11 /獲取命令執(zhí)行結(jié)果12 queryCommandValue:function

12、(cmdName)13 ;5)插件具體寫法editor.selection.getRange()獲取選取/editor類，此類用于初始化的一些設(shè)置，比如獲取內(nèi)容，設(shè)置高寬，設(shè)置編輯器內(nèi)容等等。/domUtils 類，Dom操作工具包。/utils類，靜態(tài)工具函數(shù)包/browser 類，此類用于檢測(cè)瀏覽器。/EventBase 類，此類用基礎(chǔ)事件的注冊(cè)類，比如鼠標(biāo)，鍵盤事件等。/ajax類，此類用于ajax工具類。示例1 :命令式插件1 (分頁(yè))1 UE.plugins'zpagebreak'=function()2 varme=this;3 mands'zpagebre

13、ak'=4 execCommand:function(cmdName,myobject)5 /命令執(zhí)行主體略6 7 ;8 ;分頁(yè)命令插件的執(zhí)行主體用到的方法大體如下：9 )獲取選區(qū)1 varrange=me.selection.getRange();2）往選區(qū)插入分頁(yè)標(biāo)識(shí):varpageBreakMark=this.document.createElement('span');UE.dom.domUtils.setAttributes(pageBreakMark,'style':'page-break-after:always;')；ra

14、nge.insertNode(pageBreakMark);根據(jù)分頁(yè)標(biāo)識(shí)分割內(nèi)容varcontent=me.getContent(),pageBreakPos=content.indexOf('page-break-after:always'),prevContent=content.substring(0,pageBreakPos-13),nextContent=content.substring(pageBreakPos+27);me.setContent(prevContent);/給當(dāng)前編輯器對(duì)象設(shè)置新內(nèi)容給新編輯器設(shè)置內(nèi)容，需監(jiān)聽新編輯器的ready事件，否則會(huì)報(bào)錯(cuò)/

15、varneweditor=.；獲取新編輯器實(shí)例方法此處略neweditor.addListener('ready',function(type,evt)123453)12345678this.setContent(nextContent);10);4)銷毀編輯器1 currentEditor.destroy();5)給插件按鈕設(shè)置樣式(每個(gè)工具欄按鈕都會(huì)有一個(gè)edui-for-'加插件名的樣式類名,如分頁(yè)命名插件的樣式類名：edui-for-zpagebreak )。1 addStyle('.i-f

16、i-icon'+'back ground:url(" 圖片路徑")centerno-repeat;');示例2 :命令式插件2 (插入批注)1 UE.plugins'zcomment'=function()2 varme=this;3 mands'zcomment'=4 execCommand:function(cmdName,myobject)5 /命令執(zhí)行主體略6 7 ;8 ;1)1232)123456插入批注命令插件用到的方法大體如下:創(chuàng)建要插入的字符串varcreatInser

17、tStr=function(uName,time,toCode)return!toCode?'<spanclass="z-edui-comment"contenteditable="false"edui-co mment="true"_uname="'+uName+'"_time="'+time+'">'+'<spancontenteditable="true">請(qǐng)?jiān)诖溯斎肱?</span

18、>-'+uName+time+'<ititle="刪除批注”> x</i>'+'</span>'：'<cke_commentedui-comment="true"_uname="'+uName+"'_ time="'+time+"'><spancontenteditable="true”>請(qǐng)?jiān)诖溯斎肱?lt;/span>-'+uName+time+'

19、;<i>x</i></cke_comment>'；代碼視圖和設(shè)計(jì)視圖切換時(shí)進(jìn)行相應(yīng)元素節(jié)點(diǎn)的替換varswitchImgAndCode=function(root,img2Code)UE.utils.each(root.getNodesByTagName(img2Code?'span':'cke_comment'),fun ction(node)if(node.getAttr('edui-comment')varhtml=creatInsertStr(node.getAttr('_uname&#

20、39;),node.getAttr('_time'),img2Code)；node.parentNode.replaceChild(UE.uNode.createElement(html),node);7 8 )3)設(shè)計(jì)視圖轉(zhuǎn)為源碼視圖的規(guī)則1 me.addOutputRule(function(root)2 switchImgAndCode(root,true);3 )；/源碼視圖轉(zhuǎn)為設(shè)計(jì)視圖的規(guī)則1 me.addInputRule(function(root)2 switchlmgAndCode(root);3 )；4)給插件對(duì)象添加樣式規(guī)則1 me.ready(funct

21、ion()2 UE.utils.cssRule('zcomment'，z-edui-commentbackground:url("+me.opti3 ons.UEDITOR_HOME_URL+'themes/default/images/icon comment.gif')no-repeatOcenter#ff0;bord 4er:1pxdotted#fc3;display:inline-block;padding-left:18px;color:#cb9;font-w eight:normal;'+'.z-edui-commentsp

22、ancolor:#320;'+'.z-edui-commentic ursor:pointer;display:inline-block;font-size:16px;line-height:12px;font-wei ght:bold;color:#C00;padding:2px2px0;',me.document);)；5)給插件按鈕設(shè)置樣式1 addStyle('.i-icon'+'backg round:url("圖片路徑&quo

23、t;)centerno-repeat;');示例3 :彈出框式插件(插入圖片)UE.plugins'zimage'=function()varme=this;mands'zimage'=execCommand:function(cmdName,myobject);彈出框式插件的執(zhí)行主體用到的方法大體如下:12345678910111213141）實(shí)例化彈出框?qū)ο?dialog ,以及相關(guān)配置:其中dialog寬高配置項(xiàng)由于開發(fā)包并未提供，所以需要用戶自行擴(kuò)展，更改源文件_src/ui/dialog.js ,此處省略。varurl="."

24、;彈出框文件路徑 vardialog=newUE.ui.Dialog( editor:me,iframeUrl:url,width:800,height:450,title:"插入圖片",buttons:className:'edui-okbutton', label:me.getLang("ok"), onclick:function() dialog.onok(true);1617181920212223242526272829303115，className:'edui-cancelbutton',label:me.

25、getLang("cancel"),onclick:function()dialog.close(false);)；dialog.open();dialog.onok=function()vardgSelf=this,currentEditor=this.editor,dialogWin=document.getElementById(this.id+'Jframe').contentWindo w,source=dialogWin.$NV("Source"),32title="",33imageLink="

26、",34rela=""35if(source='upload')本地上傳圖片36dialogWin.uploadSave(function(response)37vardt=response.DT;38if(dt&&dt.Rows)39varrs=dt.Rows;40for(vari=0;i<rs.length;i+)41vardr=rsi;42title=dr.get("OldName");43imageLink=dr.get("PreviewPrefix")+dr.get("

27、;ResourcePath");44imageLink=imageLink.replace(/V+/g,"/");45rela=dr.get("ResourceID");46varsourceImageLink=dr.get("PreviewPrefix")+dr.get("Path").replace(/V47+/g,"/");48currentEditor.execCommand("insertHTML",template.tmpl(49ImageLink:imageLink,50515253545556575859602)1SourceImageLink:sourceImageLink,Title:title,Alt:title,Rela:rela)；dialogWin.$S("URL","http:/ ");dialogWin.location.reload();dlgself.close(false);/圖片上傳并插入后，關(guān)閉彈出框);給插件按鈕設(shè)置樣式addStyle(