實戰FCKeditor，添加自定義工具欄---插入代碼（一）

在此文開始以前，本人用了一天時間研究了在FCKeditor中添加自定義工具欄（咋感受本身比較笨呢？）。以前，網上有不少人也在找這樣的資料，可是都沒有詳細說明。終於，偶然狀況下，發現了兩位高人的BLOG中有說起怎樣添加自定義工具欄，可是沒有插入代碼這功能的代碼。不過，站在巨人肩膀上就是爽啊，慢慢改。

 

  文章開始前，把兩位達人的BLOG先發出來：

 

清清泡泡：[url]http://j2ee.blog.sohu.com/36813753.html[/url]（詳細講解了如何添加自定義工具欄，但是不少都是不須要的步驟）
幻想曲： [url]http://www.lemongtree.com/Archives/fckedit_toolbar.aspx[/url]
[url]http://www.lemongtree.com/Archives/fckeditor_toolbar_2.aspx[/url] （只給了源碼沒說明，= =！源碼地址在16樓的回覆裏）

 

另外，插入代碼功能的JS腳本是用了 月傷 melody  製做的雙魚文本編輯器 PiscesTextEditor V1.0中的腳本，要特別感謝！

做品連接：[url]http://www.2fstory.net/blog/View.aspx?blogID=47[/url]       

 

首先，打開fckeditor下的fckconfig.js文件，找到FCKConfig.ToolbarSets["Default"]和FCKConfig.ContextMenu 在他們後面加上」InsertCode」，這個固然是本身要添加的工具欄的名字了。而後，咱們在「fckeditor\editor\lang\」文件夾下找到zh-cn.js，在最後一行後面加上如下2句：

//自定義

InsertCode:"插入代碼",

InsertCodeProp:"插入代碼屬性"

注意在這2句前DlgAboutInfo      : "要得到更多信息請訪問 "後面加個逗號。固然，還能夠一樣方法修改其餘語言js文件，我就修改了繁體的zh.js和英文的en.js

 

    如今，咱們已經定義了工具欄，開始第二大步，打開「fckeditor\editor\js\」下的fckeditorcode_gecko.js和fckeditorcode_ie.js，咱們開始註冊工具欄；

第一步：在2個文件中搜索「InsertHorizontalRule」，在後面加上「InsertCode」。

第二步：一樣在2個文件中搜索「default:if (FCKRegexLib」，在「default」以前加上這麼一句：

Case 'InsertCode':B = new FCKDialogCommand('InsertCode' , FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.htm',510,450);break;

這句話意思就是，點擊工具欄圖標時打開InsertCode.htm文件，定義了高和寬，至於文件內容咱們以後再說。

第三步：仍是在這2個文件，搜索「default:alert(FCKLang.UnknownToolbarItem」，在「default」以前加上下面一句：

case 'InsertCode':B = new FCKToolbarButton('InsertCode' , FCKLang.InsertCode,null,null,null,null,67);

        這句話意思是定義了工具欄的圖標，FCKeditor的默認圖標文件是「fckeditor\editor\skins\default\」下的fck_strip.gif圖片，本人因爲不想用重複的默認圖標，所以加了一個小圖片:

（20*20）

默認圖片是16*2056，用PS把畫布加長到16*2072，再把本身的小圖片放到最下面，這樣，自定義的圖片恰好排67位。之後加新功能還能夠依次增長此圖片。

好了。通過這麼3步，咱們已經把自定義工具欄加上去了。（在about以後，若是想加在中間，能夠在剛纔的第二和第三步裏把添加的語句加到相應的Case前面。）

 

    作了這麼多，任務算完成1/3，加油！

下面咱們開始定義「InsertCode.htm」文件：

    在「fckeditor\editor\dialog\」下新增InsertCode文件夾，新建HTM文件InsertCode.htm，裏面代碼先拷貝「fckeditor\editor\dialog\fck_textfield.html」文件，好了，，大手術開始：

 

    首先，在「<title></title>」中加上「Insert Code Properties」，這個是打開的新窗體的標題；更改FCKeditor的JS文件「common/fck_dialog_common.js」的引用爲「../common/fck_dialog_common.js」，再加上雙魚編輯器裏的插入代碼腳本「<script src="code.js" type="text/javascript"></script>」。

而後更改「window.onload = function()」函數，把裏面的if  {}  else{}刪除掉，再把function Ok()裏的代碼所有刪除，加上下面2句：

oEditor.FCK.InsertHtml(code()) ;

    window.parent.Cancel() ;

由於咱們是更改爲代碼格式的字符串加到FCKeditor編輯器裏，因此用到內置的InsertHtml函數，code()函數傳過來的是字符串；至於下面的html代碼，就更改成雙魚編輯器裏InsertCode.htm的代碼（這裏就不提供了，本人把更改好的放上來，這裏只作個簡單說明）。

    下面咱們修改「code.js」文件裏的代碼，把「function code()」裏的

window.returnValue = FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

window.close();

這兩句更改成一句：

return FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

 

好了，至此，就可使用插入代碼功能了。（添加其餘功能的時候到這一步就能夠完成了。）

完成後的編輯器圖片：
 


看見最後一個圖片沒，這就是了,點擊後出現的圖形爲：

 

嘿，興沖沖地試了下，誒呀，怎麼代碼前這麼多紅XX呢？看下源代碼，原來裏面的摺疊圖片路徑全是錯的，這下鬱悶了，試了N種方法，都沒用。無奈，最後查看FCKeditor中其餘的htm文件，發現個東東：FCKConfig.BasePath，做用是取得editor文件夾的相對路徑，例如個人例子就是：「/AJAXEnabledWebSite1/FCKeditor/editor/」。好了，那如今爲了獲得咱們存放摺疊圖片的文件夾路徑，咱們如今要定義一個變量，打開fckconfig.js文件，在文件最後一行以後加上這麼一句：

FCKConfig.CodePath  = FCKConfig.BasePath + 'dialog/InsertCode/codep_w_picpaths/' ;

    有了圖片路徑以後，咱們的繼續修改「code.js」文件：

首先，在「function code()」前面加上下面3句：

var oEditor = window.parent.InnerDialogLoaded() ;

var FCKConfig = oEditor.FCKConfig ;

var CodeImagePath   = FCKConfig.CodePath ;//獲得圖片所在文件夾路徑

搜索「PiscesTextEditor/codep_w_picpaths/」，所有替換爲「」（即，所有刪除。注意：是空，不是空格；）

一樣搜索「PiscesTextEditor\/codep_w_picpaths\/」，所有替換爲「」

替換好以後，咱們就要用到上面的圖片所在文件夾路徑了，咱們這裏使用正則替換字符串。

搜索「if (showLine) str = AddLineNumber(str);   」，在它前面加上下面2句：

var src = /\b(src=")\b/g;

    str = str.replace(src,'src="'+CodeImagePath);//獲得正確路徑

意思就是，把全部img控件的只有圖片名的src路徑替換爲正確的相對路徑。

 

好了。。修改就到這裏，不過，還只是完成了95%，爲何呢，仔細試了下，雙魚編輯器的插入代碼功能還有好多BUG。喜歡看下去的朋友繼續看，不喜歡的能夠直接下載個人文件了。

今天到此爲止，明天咱們繼續，修改Code.js文件，減小點BUG，源碼明天提供。

  Trackback:[url]http://blog.csdn.net/zss1100/archive/2007/06/17/1655875.aspx[/url]