trswcm6.5及以上二次開發(fā)-041fckeditor

1、FCKeditor 二次開檔1 FCKeditor 簡介FCKeditor 是一個專門使用在網(wǎng)頁上屬于開放源代碼的所見即所得文字編輯器。 它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用。它可和、JavaScript、ASP、ASP.NET、ColdFu、Java、以及 ABAP 等不同的編程語言相結(jié)合?！癋CKeditor”名稱中的“FCK” 是這個編輯器的作者的名字 Frederico Caldeira Knabben 的縮寫。著名的開源網(wǎng)頁編輯FCKEditor 在 09 年發(fā)布更新到 3.0，并改名為 CKEditor。原來叫 FCK，是因為最初的開發(fā)者叫 Frederico Calder

2、ia Knabben；現(xiàn)在叫 CK，意指Content and Knowledge。新版的編輯器的更新包括：新的用戶界面，一個支持 Plug-in 的 Javascript API，并提供對視覺者的使用支持。據(jù)的解釋，CK 是對 FCK 的代碼的完全重寫，而且此項工作從 2007 年就開始了，并在今年初了多個測試版。至此，為大家服務(wù)長達 6 年的 FCKeditor 將被 CKeditor 替代。目前 WCM 中使用的依然為(什么版本??？)版本的 FCKeditor。2 添加一個新的 FCKeditora)首先在頭部引入 FCKeditor 的 js 文件：b)創(chuàng)建編輯器實例，例如我要創(chuàng)建一個

3、名為 test 的編輯器，有兩種方式：方式一：注：這段 js 就代表一個編輯器實例，js 在代碼中的位置決定了編輯器相對于其他元素的位置。方式二：首先，在 html 代碼中添加一個 textarea 元素，作為編輯器替換的元素：其次，在 js 中添加如下代碼：!-3 添加一個新的插件3.1 添加一個簡單的插件例如我要添加一個插件，使得每次做刪除操作時，都保存一個回退點，則需要在editor/editor/js/plugins.js 中添加如下代碼：3.2 添加一個簡單按鈕例如需要添加一個名為 SysConfig 的按鈕， 點擊該按鈕， 彈出 alert ，可在editor/editor/js/

4、plugins.js 文件中添加如下代碼：(function()(function()/只有當編輯器加載完成 FCK 才會有Editor、EditorWindow 方法if (FCK.Editor)Event.observe(FCK.Editor.body, keydown, function() if(FCK.EditorWindow)e= FCK.EditorWindow.event; keynum = e.keyCode/兼容 ff 等的 keyCode 方式else if(e.which)keynum = e.which/按鍵為 Backspace 或者Delete，則保存回退點if(

5、keynum=8 | keynum=46)FCKUndo.SaveUndoStep(););else/如果編輯器沒加載完成則繼續(xù)回調(diào)該函數(shù)setTimeout(arguments.callee,100);)();var oFCKeditor = new FCKeditor( test ) ; /test與 textarea 的 id/name 對應(yīng)。oFCKeditor.BasePath = ./ ; oFCKeditor.Value = ; oFCKeditor.ReplaceTextarea() ;/-3.3 添加一個彈出框的按鈕例如需要添加一個名為SysConfig 的按鈕，點擊該按鈕，

6、 彈出一個框， 可在editor/editor/js/plugins.js 文件中添加如下代碼：(function()/定義彈出窗口標題/定義項執(zhí)行體，共 2 個參數(shù)，第一個為項標識，第二個為函數(shù)體mand 是編輯器中用于處理彈出窗口的函數(shù)，有 5 個參數(shù)，依次為工具/欄項標識，彈出窗口名稱，彈出頁面地址，彈出窗口寬度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sysconfig.html, 480, 220) ) ;/定義項的顯示風(fēng)格，F(xiàn)CKToolbarButton 函數(shù)的參數(shù)

7、仿照下面填寫即可，第一個/為項標識，第二個為鼠標移到該時的說明文字，后面為 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ;/關(guān)聯(lián)綁定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();(function()自定義mand 對象，主要步驟就是先，然后定義此方法的 Execute 和GetSe實現(xiàn)，一般項目定制，仿照下面寫即可varmand = fu

8、nction()/實際執(zhí)行體，切忌不要放在上面的空對象中。totype.Execute = function() alert(test);/點擊按鈕后的執(zhí)行函數(shù)totype.GetSe = function() return FCK_TRISE_OFF;/項綁定函數(shù)體，第一個參數(shù)為命令名稱，第二個參數(shù)為對應(yīng)令函數(shù)名。mand( SysConfig,d();/定義項的顯示風(fēng)格，F(xiàn)CKToolbarButton 函數(shù)的參數(shù)仿照下面填寫即可，第一個為工具欄項標識，第二個為鼠標移到該時的說明文字，后面為 nullvar oSysConfigItem = new FCKT

9、oolbarButton( SysConfig, 測試,null, null, null, null, null) ;/關(guān)聯(lián)綁定,第一個參數(shù)為按鈕名稱標識，第二個參數(shù)為對應(yīng)的按鈕 FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();4 粘貼操作目前編輯器中有 4 個與粘貼相關(guān)的按鈕：粘貼、粘貼為無格式文本、純文本粘貼(含圖)、從 MS Word 粘貼。這 4 個粘貼操作對應(yīng)的操作函數(shù)為注：按 Ctrl+V 相當于點擊粘貼按鈕，將會執(zhí)行 FCK.Paste 函數(shù)；FCK.Paste 函數(shù)中對會通過對配置參數(shù)的判斷以及剪切內(nèi)

10、容特殊樣式的判斷，來選擇對應(yīng)的粘貼方式。區(qū)分是否從 word 粘貼過來的正則表達是為：含有該樣式的則為從 word 粘貼過來的內(nèi)容。4.處理粘貼的反饋可從以上函數(shù)入手。5 FCK 源碼模式和設(shè)計模式的關(guān)聯(lián)方式一般情況下源碼模式和設(shè)計模式代碼是一致，不需要做什么特殊處理。但有些特殊情況，如：分頁符，在設(shè)計模式下看到的是一個 img 元素，但是在源碼模式下看到的是一個，像這種源碼模式下與設(shè)計模式下不一致的情況就需要做相應(yīng)處理。設(shè)計模式下的代碼是元素真實的代碼，源碼模式下的代碼只是元素在源碼模式下的一個代表符號?？傮w思路是：re = /*( class=?MsoNormal?)|(=mso-)/gi

11、按鈕名稱相應(yīng)函數(shù)粘貼FCK.Paste粘貼為無格式文本FCK.PasteAsPlaext純文本粘貼(含圖)WindosteAsPlaext從 MS Word 粘貼FCK.PasteFromWordFCKLang.SysConfigTitle = 測試;/定義項執(zhí)行體，共 2 個參數(shù)，第一個為項標識，第二個為函數(shù)體mand 是編輯器中用于處理彈出窗口的函數(shù)，有 5 個參數(shù)，依次為工具/欄項標識，彈出窗口名稱，彈出頁面地址，彈出窗口寬度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sys

12、config.html, 480, 220) ) ;/定義項的顯示風(fēng)格，F(xiàn)CKToolbarButton 函數(shù)的參數(shù)仿照下面填寫即可，第一個為項標識，第二個為鼠標移到該時的說明文字，后面為 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, 測試,null, null, null, null, null) ;/關(guān)聯(lián)綁定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();1.在設(shè)計模式下元素的真實代碼片段 A。通過設(shè)定該元素的 realElement 與源碼模

13、式下的元素 B 關(guān)聯(lián)起來。這樣在切換到源碼模式時，該元素對應(yīng)的代碼將表現(xiàn)為 B。添加操作使得從源碼模式切換到設(shè)計模式時，B 能重新還原為 A。下面仍以分頁符為例,相關(guān)代碼如下:從源碼模式切換到設(shè)計模式是，所需要做的處理：這段代碼的總體思路是：獲取到源碼模式下的所有 TRS_PAGE_SEPARATOR 節(jié)點，在該節(jié)點前面img 節(jié)點，并刪除 TRS_PAGE_SEPARATOR 節(jié)點。6 FCKeditor 常用接口FCKPageBreaksProsor.Pros= function()var aPageSeps =.geementsByTagName( TRS_PAGE_SEPARATOR

14、) ; var ePageSep ;var i = aPageSeps.length - 1 ;while ( i = 0 & ( ePageSep = aPageSepsi-) var oFakeImage =FCKProsor_CreateFakeImage( FCK PageBreak,ePageSep.cloneNode(true) ) ; ePageSep.parentNode.insertBefore( oFakeImage, ePageSep ) ; ePageSep.parentNode.removeChild( ePageSep ) ;totype.Execute = function()/創(chuàng)建 TRS_PAGE_SEPARATOR 元素var e = FCK.Editor.createElement(TR