FCKeditor本身沒有一個 <code> 代碼標(biāo)簽的按鈕，但是我們在寫文章時經(jīng)常要插入一些代碼，前面介紹過《fckeditor添加一個插入代碼的功能圖標(biāo)》，但是那是一個插入代碼的功能，html格式是：<p class=code></p> ，而非為某一小段代碼添加 <code> 這個inline（內(nèi)聯(lián)）標(biāo)簽，html格式是：<code></code> 。
本文將介紹如何為FCKeditor添加一個<code>代碼標(biāo)簽的按鈕。
1、給Toolbar添加字段ComputerCode
打開 FCKeditor\fckconfig.js ，在 FCKConfig.ToolbarSets["Default"] 里添加字段“ComputerCode”，注意有的人用的是 FCKConfig.ToolbarSets["Basic"] ，我這里用的是 ["Default"] ，各人根據(jù)自身編輯器設(shè)置而定。
給Toolbar添加字段ComputerCode
2、添加 ComputerCode 樣式定義
同樣是在 FCKeditor\fckconfig.js ，在 FCKConfig.CoreStyles 里添加 ComputerCode 樣式定義。
添加 ComputerCode 樣式定義
3、添加樣式 ComputerCode
打開 FCKeditor\fckstyles.xml ，添加樣式 ComputerCode 。[博主按：這里不添加好像也可以]
添加樣式 ComputerCode
4、設(shè)置按鈕的中文提示名
打開 FCKeditor\editor\lang\zh-cn.js ，添加 ComputerCode : "代碼標(biāo)簽", ，這個是當(dāng)鼠標(biāo)移到編輯器的這個按鈕時，出現(xiàn)的中文提示。
設(shè)置按鈕的中文提示名
5、設(shè)置按鈕的英文提示名
打開 FCKeditor\editor\lang\en.js ，添加 ComputerCode : "Computer Code", ，這個是當(dāng)鼠標(biāo)移到編輯器的這個按鈕時，出現(xiàn)的英文提示（如果你的編輯器用的是英文版）。
設(shè)置按鈕的英文提示名
6、修改fckeditor的核心文件
打開 FCKeditor\editor\js\fckeditorcode_ie.js ，這個文件是fckeditor的核心文件，我們?nèi)绾涡薷哪兀?/p>
我修改的方法是完全仿照編輯器上另一按鈕刪除線(StrikeThrough)的標(biāo)簽，在 fckeditorcode_ie.js 里查找 StrikeThrough ，然后添加與之語法一樣的 ComputerCode 。一共有三個位置。
▲修改（1）
▲修改（2）
▲修改（3） 點(diǎn)擊圖片放大
以上是針對IE瀏覽器的修改，我們還要修改 FCKeditor\editor\js\fckeditorcode_gecko.js ，這是針對非IE瀏覽器的核心文件。修改內(nèi)容是一樣的。這里就不多累贅了。
7、設(shè)置完畢
至此，F(xiàn)CKeditor添加一個<code>代碼標(biāo)簽的按鈕就完成了。這時，我們可以在編輯器的工具條上看到多出了一個圖標(biāo)
，我們就可以像使用粗體按鈕那樣使用它了。
8、添加<code>標(biāo)簽的樣式表
在文章的css文件里，添加<code>標(biāo)簽的樣式表，如本博使用的代碼是：
code{
font-family:Monaco, Consolas, "Andale Mono","DejaVu Sans Mono", monospace;
background:#fefefe;
border:0px solid #f1f1f1;
border-radius:0px;
font-size:13px;
color:#d41faa;
padding: 3px 3px 3px 3px;
}
9、編輯器里為什么看不到樣式效果？
編輯器文本區(qū)域與文章的css文件是不同的，需要分別設(shè)置。
編輯器文本區(qū)域的css文件是 FCKeditor\editor\css\fck_editorarea.css ，我們可以在此文件里設(shè)置編輯器里的文本樣式。
特別注意，由于緩存，設(shè)置后是不能立即看到效果的，要想設(shè)置立即生效，需要打開 FCKeditor\fckconfig.js ，在 fck_editorarea.css 后面添加幾個數(shù)字或字母，每修改css一次都要更改這個數(shù)字或字母。
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css?123' ;
相關(guān)文章推薦
fckeditor添加一個插入代碼的功能圖標(biāo)
