FCKeditor是現(xiàn)在最為流行的開(kāi)源編輯器，SyntaxHighlighter是一個(gè)用JS實(shí)現(xiàn)的代碼高亮顯示插件，可以最小化修改您的程序?qū)崿F(xiàn)效果，最終效果截圖：



演示網(wǎng)頁(yè)：

下載FCKeditor + SyntaxHighlighter插件包：fck_SyntaxHighlighter我們打包版

下面分步介紹如何在FCKeditor環(huán)境中使用SyntaxHighlighter。

后臺(tái)FCKeditor編輯器的修改

1、將包解壓后，把 insertcode 文件夾上傳到 FCKeditor編輯器的editor\plugins\目錄下，然后修改FCKeditor編輯器的fckconfig.js此文件，在此文件中 FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;下面加入以下代碼：
FCKConfig.Plugins.Add('insertcode');

 2、打開(kāi)FCKeditor編輯器的editor\lang文件夾里的zh-cn.js，在DlgDivInlineStyle : "CSS 樣式",（注意這句后面一定要加一個(gè)逗號(hào)“,”）下面加入以下代碼
//Plugins
InsertCodeBtn : "插入代碼"

 3、修改FCKeditor編輯器的fckconfig.js文件，在編輯器控制面板中加入按鈕，在調(diào)用工具欄參數(shù)的Media后面加入insertcode（注意正確加上標(biāo)點(diǎn)符號(hào)，否則會(huì)報(bào)錯(cuò)）。如下所示：
FCKConfig.**Sets[ "standard"] = [
['Source','Paste','PasteText','PasteWord','-','Undo','Redo','-','Bold','Italic','Underline','StrikeThrough','TextColor','Table','-','JustifyLeft','JustifyCenter','JustifyRight','OrderedList','UnorderedList','-','Image','Attach','Flash','Media','InsertCode'],完成以上操作后，此時(shí)啟動(dòng)FCKeditor編輯器應(yīng)該在編輯器的**上多了一個(gè)圖標(biāo)，點(diǎn)擊此圖標(biāo)即可添加你的代碼了。如果報(bào)錯(cuò)，提示找不到工具項(xiàng)，那是FCKeditor的緩存沒(méi)清除，退出后臺(tái)或更新緩存，刷新一下，重新進(jìn)入就可以看到代碼插入圖標(biāo)了。

前臺(tái)顯示頁(yè)面的SyntaxHighlighter調(diào)用

1、將包解壓后把 syntax 文件夾上傳到前臺(tái)根目錄下的js文件夾中。

2、在需要進(jìn)行高亮顯示處理的HTML頁(yè)面中增加SyntaxHighlighter控制代碼，將如下代碼，插入到HTML頁(yè)面的<header>與</header>之間：

<script type="text/javascript" src="/js/syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/syntax/scripts/shLegacy.js"></script> 
<script type="text/javascript" src="/js/syntax/scripts/shBrushAll.js"></script>
<link href="/js/syntax/styles/shCore.css" type="text/css" rel="stylesheet"/>
<link href="/js/syntax/styles/shThemeDefault.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

<font face="Courier New" style="background-color: #f8f8f8">2、在前臺(tái)頁(yè)的CSS文件中增加如下樣式控制CSS代碼（這段也可以不加，只是為了更美觀）：</font>

.codeHead {font-weight: bold;font-size: 12px;padding: 5px;padding-left: 15px;background: #fff;border-bottom: 1px solid #ddd;}
.codeText {border: 1px solid #ddd;width: 98%;overflow: auto;margin: 0 0 1.1em;padding: 0;word-break: break-all;background: #fff;font: 12px 'Courier New', Monospace;}
.codeText ol {list-style: decimal-leading-zero;margin: 0 1px 0 45px;padding: 5px 0;color: #5C5C5C;border-left: 1px solid #ddd;background: #fff;}
.codeText ol li {list-style-type:decimal;padding-left: 10px;background: #FFF;}
.codeText ol li.alt {background: #FFF;}
.codeText ol li span {color: #000;}

注意：這樣的前臺(tái)調(diào)用路徑為 /js/syntax/ 是因?yàn)槲疑蟼鞯搅诉@個(gè)路徑，此路徑根據(jù)你的需要可修改。應(yīng)為你實(shí)際上傳的路徑。

至此修改全部結(jié)束，如果你在修改中遇到什么問(wèn)題，歡迎與我們交流，tech#cncms.com

補(bǔ)充：有朋友反映加載時(shí)頁(yè)面會(huì)卡一下才能顯示完，原因是在頁(yè)面加載時(shí)JS即開(kāi)始運(yùn)行，進(jìn)行代碼的著色，解決辦法就是，讓代碼著色 SyntaxHighlighter.all(); 延時(shí)執(zhí)行即可，我們把上面的代碼稍改一下：

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

改為：

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
setTimeout("SyntaxHighlighter.all();",300);
</script>

這樣改后，就感覺(jué)不到加載時(shí)的卡了。