trswcm6.5及以上二次開發(fā)-034器相關(guān)

1、修訂序號變更日期變更動作變更內(nèi)容詳情描述版本1.2010-04-25DEV2新建新建本文檔1.02.2011-01-12修改1 添加了修改頁，以后本文檔有修改時請?zhí)顚懶薷男畔ⅰ? 編輯器相關(guān)1.1 前言WCM 的實施或二次開發(fā)過程中，一旦遇到編輯器相關(guān)的，很多同事就感到很茫然，不知道該如何下手。一方面是由于編輯器跟其他 wcm 對象不太一樣，它是個獨立的東東；再者，相關(guān)介紹文檔和二次開發(fā)手冊的不齊全也給實施 帶來了難度。本文以 WCM65 的編輯器為例，就項目中通常反饋的一些問題及二次開發(fā)做個說明，后期會不斷完善補充。1.2 概述目錄功能./ wcm / app / editor編輯器目錄，所

2、有編輯器相關(guān)一般都在這個目錄（庫,庫頁面除外）./ wcm / app / editor / fckconfig.js編輯器的配置文件，可修改此文件來改變編輯器特性。常用的有以下幾個：/是否開啟無格式文本粘貼 FCKConfig.ForcePasteAsPlaext= false ;/是否對從 word 文件中拷貝的信息作額外處理（僅限）FCKConfig.AutoDetectPasteFromWord = true/粘貼樣式開關(guān)，開啟后粘貼到編輯器的信息會在外部加上一個 div 容器，樣式名為UnionStyleName.FCKConfig.PasteToUnionStyle = false

3、;FCKConfig.UnionStyleName = cas_content;./ wcm / app / editor / editor / dialog編輯器彈出頁面目錄。編輯器 中有很多是要彈出窗口的，它們的實現(xiàn)都在這個目錄，比如： 頁面屬性為 fck_docprops.html； 為fck_image.html。./ wcm / app / editor / editor / css編輯器的默認(rèn)加載樣式目錄 （編輯器自定義樣式功能中涉及的欄目和站點的自定義樣式文件就存放于該目錄下）./ wcm / app / editor / editor / lang編輯器多語言翻譯目錄，默認(rèn)加載

4、為 cn.js，項目定制中遇到有添加中文信息的，建議采用此種方式1.3 實戰(zhàn)示例1.3.1 目前編輯器項太多，通常編輯只關(guān)注常用的幾個，如何定制編輯器項顯示？解答：目前 WCM65 已經(jīng)支持對欄目級編輯器項自定義，但對沒有定制的欄目默認(rèn)顯示的仍然是編輯器自帶的項，這里說下如何調(diào)整編輯器默認(rèn)的項顯示：打 開 編 輯 器 配 置 文 件 （ ./wcm/app/editor/fckconfig.js ）， 找 到FCKConfig.ToolbarSetsWCM6，這是個二維數(shù)組，每一項就是要顯示的項，數(shù)組項的顯示順序，其中 WCM6AdvToolbar 是高級順序就是定制高級，如果選上它還可以FC

5、KConfig.ToolbarSetsWCM6_ADV，可根據(jù)實際需要進(jìn)行調(diào)整。1.3.2 如何新增一個自定義的項？需求：在打印操作。項右邊增加一個“系統(tǒng)配置”菜單，點擊后彈出一個新頁面，執(zhí)行相關(guān)分析：通過上例已經(jīng)了解編輯器是如何加載的操作并獲得響應(yīng)。項的，現(xiàn)在主要是如何定義這個項修改步驟：添加項打 開 編 輯 器 配 置 文 件 （ ./ wcmFCKConfig.ToolbarSetsWCM6，在 打印命名要求為英文并唯一即可。/app / editor / fckconfig.js ），找到 項 Pr 后追加一項 SysConfig ，這里的綁定執(zhí)行操作打開 ./ wcm / app /

6、 editor / editor / lang / cn.js,這個文件里只定義了一個FCKLange 變量，它是編輯器處理多語言的公共變量，需要在后面追加此項項要用到的中文變量，本例中性）需要新增一個”系統(tǒng)配置”變量項。如果沒有可跳過這步。（注意 json 格式的合法打開./ wcm /app / editor / editor / js / plugins.js,在最后面追加下列代碼，其中標(biāo)識標(biāo)識SysConfig一定要與上一步定義的保持一致。按上述要求調(diào)整后，刷新瀏覽器，即可發(fā)現(xiàn)項已添加，點擊后也可彈出指定頁面。var FCKLang = BREMOVEBLOCKSTYLE :段落格式,

7、SysConfigTitle:系統(tǒng)配置相關(guān)問題：如何給新增的項添加？解答：按照上述步驟完成后發(fā)現(xiàn)新增的項沒有，此時可上傳一張 16*16 像素至 ./ wcm / app / editor / editor / skins / silver / toolbar 目錄的命名必須要跟前面定義的菜單標(biāo)識保持一致且要求為小寫，如上例，即可上傳一張 sysconfig.gif。新增一個項，希望點擊后對編輯器內(nèi)容做相關(guān)處理，而不是彈出頁面，就像粘貼，全選那樣，這個該如何做呢？解答：步驟和上例基本一致，唯一不同的是最后的執(zhí)行體不能使用而是需要自己定義。具體可參照下述代碼，刷新后執(zhí)行按鈕，即可彈出提示信息。m

8、and，/系統(tǒng)設(shè)置 (function()/定義彈出窗口標(biāo)題FCKLang.SysConfigTitle = FCKLang.SysConfigTitle | 系統(tǒng)配置;自定義mand 對象，主要步驟就是先，然后定義此方法的 Execute和 GetSe 實現(xiàn)，一般項目定制，仿照下面寫即可varmand = function()/實際執(zhí)行體，切忌不要放在上面的空對象中。totype.Execute = function()alert(22);totype.GetSe = function() return FCK_TRISE_OFF;/系統(tǒng)設(shè)置 (functio

9、n()/定義彈出窗口標(biāo)題FCKLang.SysConfigTitle = FCKLang.SysConfigTitle | 系統(tǒng)配置;/定義項執(zhí)行體，共 2 個參數(shù)，第一個為項標(biāo)識，第二個為函數(shù)體mand 是編輯器中用于處理彈出窗口的函數(shù)，有 5 個參數(shù)，依次為工具/欄項標(biāo)識，彈出窗口名稱，彈出頁面地址，彈出窗口寬度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sysconfig.html,480, 220) ) ;/定義項的顯示風(fēng)格，F(xiàn)CKToolbarButton 函數(shù)的參數(shù)仿照

10、下面填寫即可，第一個/為項標(biāo)識，第二個為鼠標(biāo)移到該時的說明文字，后面為 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ;/關(guān)聯(lián)綁定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();1.3.3 如何在編輯器編輯區(qū)域新增右鍵菜單？需求：新增一個“測試“右鍵菜單，在剪切操作下面，點擊后執(zhí)行相應(yīng)的動作。修改步驟：定義要用到的中文變量打開 ./ wcm /

11、 app / editor / editor / lang / cn.js，在后面追加變量添加菜單項打開./ wcm / app / editor / fckeditor_ex.js，搜索 FCK_Context_GetListener 方法，發(fā)現(xiàn)有個分支語句，因為在不同情況下右鍵菜單是不同的，比如一般情況下和選中后的右鍵菜單就不同。這里以一般為例，在 Generic 分支里，剪切項 cut 下面仿照著添加一列，這里的 Test 是新增菜單項的唯一標(biāo)識，命名為英文唯一即可。/參數(shù)介紹：AddItem 共有 4 個參數(shù)，第一個為右鍵菜單標(biāo)識，第二個為移到上面的提示信息，第三個為右鍵菜單左側(cè)的 ，

12、0 或 null 是沒有，也可以是字符串，傳入當(dāng)前圖標(biāo)的路徑；第四個定義響應(yīng)狀態(tài)，一般仿照寫即可。/無 方式.AddItem( Test, FCKLang.Test, 0,mand( Test ).GetSe() = FCK_TRISE_DISABLED ) ;/自定義 方式:：上傳 至指定路徑，此處直接 即可，注： 大小 16*16*.AddItem(Test,FCKLang.Test,./editor/skins/silver/toolbar/test.gif,mand( Test ).GetSe() = FCK_TRISE_DISABLED ) ;var FCKLang = BREMOV

13、EBLOCKSTYLE :段落格式,SysConfigTitle:系統(tǒng)配置, Test:“測試”/項綁定函數(shù)體mand( SysConfig,d();/下面綁定方式和上例一致var oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ; FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();設(shè)置響應(yīng)函數(shù)體打開./ wcm / app / editor / fckedito

14、r_ex.js，搜索mand 方法，里也仿照著加個 case 即可，說到這面也有個分支語句，對各個菜單項定義相應(yīng)的操作，里，看過 1.3.2 的應(yīng)該會發(fā)現(xiàn)，這里和定義就這 2 中，一種是封裝好的項操作有點類似，是的，編輯器中執(zhí)行體mand 方法，彈出頁面；另一種就是自己個執(zhí)行體，然后實現(xiàn) Execute 和 GatSe 方法即可。針對本例，如果是要彈出窗口的，可以：如果是自定義函數(shù)體的，可以：1.3.4 如何在編輯器下方添加自定義的按鈕？需求：在編輯器下方“全轉(zhuǎn)半”處增加一個“半轉(zhuǎn)全“按鈕。修改步驟：定義要用到的中文變量打開 ./ wcm / app / editor / editor / l

15、ang / cn.js，在后面追加變量var FCKLang = BREMOVEBLOCKSTYLE :段落格式,SysConfigTitle:系統(tǒng)配置,case Test:od =d();break;然后在此函數(shù)下面按照三步驟定義mand 即可varmand = function()/實際執(zhí)行體，切忌不要放在上面的空對象中。totype.Execute = function() alert(22);totype.GetSe = function() return FCK_TRISE_OFF;case Test:/具體參數(shù)見 1.3.2d( Test, FCKL

16、ang.Test,htl, 415, 300 ) ;break;添加項打開 ./ wcm / app/ editor / editor / fckeditor.jsp。搜索 arr 變量定義，發(fā)現(xiàn)是一個數(shù)組，上面定義的就是顯示在下方的各選項，仿照著在后面追加即可。定義響應(yīng)函數(shù)體打開頁面 ./ wcm / app / editor / editor / fckeditor.js,搜索 actionClearbl,發(fā)現(xiàn)下面還定義了很多 actonXX 的函數(shù)體，是的，這里定義的就是編輯器下方按鈕的執(zhí)行體，具體的引用規(guī)則是：action + 上面actionSb2db 方法。變量標(biāo)識（首字母要大寫）

17、，本例中，要定義的就是1.3.5 如何獲取編輯器正文值或如何給編輯器正文賦值？解答：回答這個問題，首先要了解編輯器是如何與文檔編輯頁面交互的，編輯器首頁面路徑地址是 ./ wcm / app / editor / editor.html,它是通過 iframe 嵌在文檔編輯頁面./ wcm / app /_addedit.jsp 中的：/_addedit.jsp頁面內(nèi)嵌代碼div id=html_editor style=display:/獲取當(dāng)前編輯器內(nèi)容var sHtml = FCK_GetHTML();/對正文字符進(jìn)行半轉(zhuǎn)全替換var sNewHtml = parseDb2Sb(sHtm

18、l);/用新的正文內(nèi)容填充編輯器 PageContext._replaceHtml(sHtml, sNewHtml);var arr= /按鈕定義的規(guī)則如下：每個按鈕占 3 位，第一為操作唯一標(biāo)示位，要求英文（小寫）唯一即可，第二位是鼠標(biāo)移到按鈕上的提示信息，第三位是按鈕上的顯示文字。clearstyle,FCKLang.TIP1 , FCKLang.TIP2, clearclasses, FCKLang.TIP3, FCKLang.TIP4, clearbl, FCKLang.TIP5, FCKLang.TIP5, outdentpara, FCKLang.TIP6,FCKLang.TIP6

19、, replaces, FCKLang.TIP14, FCKLang.TIP7, db2sb, FCKLang.TIP8, FCKLang.TIP9,/新增半轉(zhuǎn)全按鈕，sb2db, FCKLang.TIP15, FCKLang.TIP16;Test:“測試”,TIP15: 半角轉(zhuǎn)全角,TIP16: 半轉(zhuǎn)全編輯器已經(jīng)提供了提取和設(shè)置內(nèi)容的接口，所以首要問題就是在當(dāng)前頁找到編輯器_addeditl.js 為例：首頁，以文檔編輯頁面1.3.6 如何在自定義操作中獲取編輯器對象，并調(diào)用相關(guān)接口？分析：式：自定義面講如何自定義d 和 調(diào)用選項和右鍵菜單時提到了編輯器中新增操作的兩種方mand 方法彈出頁

20、面，但具體的執(zhí)行體沒有講解詳細(xì)，本例中就針對這 2 中方式大概講解下如何獲取編輯器對象和調(diào)用相關(guān)接口，仍以 1.3.2 中新增的“系統(tǒng)配置”項進(jìn)行說明。修改步驟：mand 彈出窗口模式下面為 1.3.2 例出頁面 fck_sysconfig.html 的部分實現(xiàn)自定義d 模式/彈出頁面的父頁面都是./ wcm / app /editor / editor / fckdialog.html.調(diào)用下面的接口即可獲取編輯器對象var oEditor= windorent.InnerDialogLoaded() ;/獲取 FCK 后，即可調(diào)用編輯器的大部分應(yīng)用接口；可以通過 setHtml,getHt

21、ml 進(jìn)行編輯器獲取和賦值處理；也可以用 CreateElement 產(chǎn)生新元素，mand（“項標(biāo)識”）直接執(zhí)行命令。var FCK= oEditor.FCK ;/獲取多語言處理對象，后面的中文變量就可以用 FCKLang.XX var FCKLang= oEditor.FCKLang ;/獲取編輯器配置對象，用 FCKConfig.XX 來獲取某一個具體配置項var FCKConfig= oEditor.FCKConfig ;/首先獲取到編輯器首頁面的窗體對象，然后直接調(diào)用 GetEditor 接口獲取編輯器對象var oTrsEditor = $(_trs_editor_);var FCK

22、 = oTrsEditor.contentWindow.GetEditor();/獲得當(dāng)前編輯器內(nèi)容var sRetrun = FCK.GetHTML(true,true);/與獲取類似，也可以直接設(shè)置編輯器值 FCK. SetHTML(stringValue)iframe id=_trs_editor_ style=width:100%;height:100%; frameborder=0 src=./editor/editor.html?ChannelId=&SiteId= allowtransparency=true在./ wcm /app / editor / editor / js

23、/ plugins.js 文件中可以直接FCKConfig 對象，相關(guān)屬性和上面一致。FCK，F(xiàn)CKLang，1.3.7 如何向當(dāng)前光標(biāo)處追加內(nèi)容？需求：個以 1.3.3 中自定義的 Test 右鍵菜單為例，要求點擊 Test 后，在當(dāng)前光標(biāo)處一。解答： 重寫mand 的函數(shù)執(zhí)行體相關(guān)問題：單純的字符串應(yīng)該怎么調(diào)用呢？解答：單純的字符串可以直接調(diào)用 FCK。InertHtml 接口如果的是一端有結(jié)構(gòu)的元素，比如一張和一段說明文字，要求文字在圖片下面，又該如何調(diào)用呢？解答：/處理此問題，首先要確定好要到編輯器中的 html 格式。本例中大概如下：this is a test!/然后即可仿照下述代

24、碼進(jìn)行totype.Execute = function()/首先依次定義各子節(jié)點和父節(jié)點元素var oImage = FCK.CreateElement( IMG );oImage.setribute(src, ht/img/baidu_logo.gif) ; oImage.setribute(border, 0 ) ;/實際執(zhí)行體，切忌不要放在上面的空對象中。totype.Execute = function() FCK.InsertHtml( This is a test. );/實際執(zhí)行體，切忌不要放在上面的空對象中。totype.Exe

25、cute = function() var oImage = FCK.CreateElement( IMG );oImage.setribute(src, ht/img/baidu_logo.gif) ; oImage.setribute(border, 0 ) ;oImage.setribute(alt, “”) ;1.3.8 編輯器的”內(nèi)容模板”工具項內(nèi)置了 5 套基本模板，現(xiàn)在自定義一套模板或修改已有模板的展現(xiàn)形式，應(yīng)該怎么做？解答：內(nèi)置模板在 ./ wcm / app / editor / fcktemplates.xml 文件中，打開文件發(fā)現(xiàn)，每個模板就是一個 template 節(jié)點

26、，具體節(jié)點的定義規(guī)則見下，新增一套模板只需仿照著實現(xiàn)template 節(jié)點即可。/首節(jié)點定義顯示名稱和，存放路徑為./ wcm / app / editor / editor / dialog / fck_template / images 目錄，建議大小為（100*70）px.細(xì)心的你可能發(fā)現(xiàn)，wcm 中內(nèi)置的模板有 2 類，一種是彈出窗口，需要用戶提前輸入相關(guān)參數(shù)的，如注釋模板，而另一類點擊后直接就生成代碼，這個主要就是通過wizared 屬性設(shè)置，為 basic 時彈出窗口，為 none 是直接。為某段內(nèi)容進(jìn)行額外的注釋。/html 節(jié)點的內(nèi)容就是點擊后的內(nèi)容，其中對需要用戶輸入的地方可以用類似(# XX)的方式定義，然后在后面的 Params 節(jié)點中替換此變量!CDATA注釋:#descoImage.setribute(a