ckeditor+ckfinder+syntaxhighlight實現上傳和插入代碼高亮（for .NET）

　　最近在做一個BLOG程式,找了好幾款編輯器，起初想用FckEditor發現速度稍微有點慢，並且作為一個coder，那肯定要插入代碼了，代碼高亮那是必須的,美觀大方可是也有缺點客戶瀏覽時頁面代碼過多，影響速度。以前沒注意原來Fckeditor已經升級為ckeditor並且不再使用引用dll方式,我個人喜歡用新的,就研究了下最新版的ckeditor如何?我們想要的功能！在調試期間也遇到了一點問題，現在還有一點BUG沒有解決，待會我貼出來，廢話說了這麼多。呵呵~

　　註：本文參考各位前輩部分程式，謝謝！

　　進入正題：ckeditor_3.4.1+ckfinder_aspnet_2.0.1 有需要的點擊下載（目前是最新版），注意下載ckfinder的時候一定要選擇.net版本。

由於新版的ckeditor不支援上傳管理檔案功能，我們要配合ckfinder來實現上傳功能。

        

　　我在VS2005+xp 環境下進行測試。VS2008 10版本是否能正常調用，我不太清楚，有待大家測試！

第一步：搭建基本結構

　　先解壓修改下程式，不是必需的檔案都可以刪除，因為有些檔案我們根本用不到，不刪除的話還有可能給駭客留下漏洞導致網站被入侵^_^。

ckeditor刪除多餘檔案後結構如所示 在lang檔案夾下刪除那些不需要語言檔案，尾碼名為.js我們只留下 cn.js zh-cn.js 和en.js三個即可

  　　　　

ckfinder刪除不必要檔案後結構如下：（這裡面也有一個lang的檔案夾開啟和ckeditor進行一樣的操作刪除那些不必要的語言檔案）

　　　　

 　　接著我們開啟VS建立網站

 同時將瘦身後的ckeditor 和ckfinder 添加進來，大致結構如所示（在實際網站應用程式中，你可以修改預設資料夾名稱防止被別人猜解目錄搞破壞）：

　　　　

　　bin 檔案夾下的CKfinder.dll 在CKfinder/bin/debug 檔案夾下有，直接添加引用即可自動產生bin檔案夾。

至此我們做完前期的工作，現在肯定是不行的我們要修改一些設定檔。

 第二部：修改配置

　　先修改ckeditor，在ckeditor檔案夾下找到config.js

添加如下代碼

config.skin = 'kama';config.language = 'zh-cn';config.toolbar_Full = [    ['Source','-','Save','NewPage','Preview','-','Templates'],    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],    '/',    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],    ['Link','Unlink','Anchor'],    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],    '/',    ['Styles','Format','Font','FontSize'],    ['TextColor','BGColor']    ];

　　（注意：盡量不要加入漢字注釋，可能導致發布網站是無法調用CSS樣式表和JS代碼）

說明：config.skin 後面是皮膚，預設ckeditor提供三個皮膚;
　　　config.language 後面是預設語言 我們設定為 zh-cn;
　　　config.toolbar_full 後面是工具按鈕的欄;

  　　到這裡我們就可以在aspx頁面中調用預設的ckeditor編輯器了;

　　建立一個aspx檔案 在HTML代碼的head 部分加入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>（這個必需）

在div部分加入  <asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" runat="server"></asp:TextBox> 運行即可看到ckeditor編輯器了

擷取編輯器的值插入資料庫 則TextBox.Text即可，綁定的話直就從資料庫讀取<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox> 

提示：在插入類似'時候ASPX頁面提示用戶端（*）中檢測到有潛在危險的 Request.Form 值。在頁面HTML代碼第一行加入validateRequest="false"或者修改web.config檔案即可，但這不是最安全的做法，可能存在提交非法資料和跨站的危險，這裡不做深入探討。

我們看下效果

　　　　

當我們開啟插入圖片按鈕時候我們會發現跟以前的fckeditor不一樣，缺少了上傳圖片按鈕。如下：

　　　　

　　那麼接下來我們修改下cdeditor下面的config.js 在函數內加入如下代碼：

    config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Image';    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';    config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Image';    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

　　說明：config.filebrowser* 為上傳檔案時調用的ckfinder connector.aspx檔案相應路徑，這個根據您的網站檔案結構修改，僅為測試我沒有修改檔案夾名稱。

添加代碼後在運行一下看看這個時候你發現有了上傳的按鈕

　　　　

點擊瀏覽伺服器按鈕提示如下：

　　　　

　　那我們來修改下找到ckfinder下面的config.ascx檔案編輯 找到public override bool CheckAuthentication() 方法將return false;修改為 return true;

(這裡需要說明一下，這樣修改不安全，可以導致任何人上傳檔案，那麼你可以先判斷session 或者通過其他的手段達到一般使用者不能非法上傳，具體不再贅述)

本文只講調用 所以就沒有寫的那麼嚴格，修改後代碼如下：

public override bool CheckAuthentication(){// WARNING : DO NOT simply return "true". By doing so, you are allowing// "anyone" to upload and list the files in your server. You must implement// some kind of session validation here. Even something very simple as...////return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );//// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the// user logs on your system.return true;}

 　　還是在這個檔案內找到 public override void SetConfig() 方法裡面的    BaseUrl = "~/UploadFiles/"; 後面的目錄根據自己的項目結構寫，我單獨建立了個UploadFiles檔案夾存放上傳檔案。

　　　　

這樣基本的上傳算是搞定了！

接下來要實現代碼高亮功能了

我們用SyntaxHighlighter來實現，其他的暫時還沒研究，有興趣的朋友可以研究下！

在ckeditor/plugins/下添加syntaxhighlight檔案夾（名稱可以按照自己愛好來寫）我這裡就用預設的名稱。

在syntaxhighlight檔案夾下分別添加 dialogs、images、lang檔案夾和一個JS檔案 plugin.js

plugin.js檔案內容如下

CKEDITOR.plugins.add("syntaxhighlight",{requires:["dialog"],lang:["cn"],init:function(a){var b="syntaxhighlight";var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));c.modes={wysiwyg:1,source:1};c.canUndo=false;a.ui.addButton("Code",{label:a.lang.syntaxhighlight.title,command:b,icon:this.path+"images/syntaxhighlight.gif"});CKEDITOR.dialog.add(b,this.path+"dialogs/syntaxhighlight.js")}});

 

dialogs檔案夾下添加syntaxhighlight.js檔案這段代碼您可以上網搜尋一下syntaxhighlight.js，網上很多的，略。

　images檔案夾添加syntaxhighlight.gif表徵圖，自己在網上找一個自己喜歡的即可。

　lang 檔案夾下添加 一個en.js 和cn.js檔案

   cn.js代碼如下

CKEDITOR.plugins.setLang('syntaxhighlight', 'cn',{syntaxhighlight:{title: '添加或更新代碼',sourceTab: '代碼',langLbl: '選擇語言',advancedTab: '進階',hideGutter: '隱藏分割線',hideGutterLbl: '隱藏分割線和行號',hideControls: '隱藏工具列',hideControlsLbl: '隱藏浮動工具列',collapse: '程式碼摺疊功能',collapseLbl: '預設摺疊代碼塊 (需要啟用工具列)',lineWrap: '自動換行',lineWrapLbl: '關閉自動換行',autoLinks: '自動連結',autoLinksLbl: '不自動轉換超連結',lineCount: '起始行號',highlight: '高亮行號',highlightLbl: '輸入以逗號分隔的行號, 如 <em>3,10,15</em>.'}});

en.js 代碼

CKEDITOR.plugins.setLang('syntaxhighlight', 'en',{syntaxhighlight:{title: 'Add or update a code snippet',sourceTab: 'Source code',langLbl: 'Select language',advancedTab: 'Advanced',hideGutter: 'Hide gutter',hideGutterLbl: 'Hide gutter & line numbers.',hideControls: 'Hide controls',hideControlsLbl: 'Hide code controls at the top of the code block.',collapse: 'Collapse',collapseLbl: 'Collapse the code block by default. (controls need to be turned on)',showColumns: 'Show columns',showColumnsLbl: 'Show row columns in the first line.',lineWrap: 'Disable line wrapping',lineWrapLbl: 'Switch off line wrapping.',lineCount: 'Default line count',highlight: 'Highlight lines',highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.'}});

 最後在ckeditor/config.js添加兩行調用的代碼

    config.extraPlugins = 'syntaxhighlight';   config.toolbar_Full.push(['Code']);

在網站你覺得合適的位置添加一個scripts和styles 檔案夾裡面分別存放給代碼著色的JS代碼和CSS樣式表（代碼太長我不貼上來了，你可以去網上搜一下）

 接下來在你要顯示代碼的頁面HTML的head部分加入

<script type="text/javascript" src="scripts/shCore.js"></script><script type="text/javascript" src="scripts/shBrushBash.js"></script><script type="text/javascript" src="scripts/shBrushCpp.js"></script><script type="text/javascript" src="scripts/shBrushCSharp.js"></script><script type="text/javascript" src="scripts/shBrushCss.js"></script><script type="text/javascript" src="scripts/shBrushDelphi.js"></script><script type="text/javascript" src="scripts/shBrushDiff.js"></script><script type="text/javascript" src="scripts/shBrushGroovy.js"></script><script type="text/javascript" src="scripts/shBrushJava.js"></script><script type="text/javascript" src="scripts/shBrushJScript.js"></script><script type="text/javascript" src="scripts/shBrushPhp.js"></script><script type="text/javascript" src="scripts/shBrushPlain.js"></script><script type="text/javascript" src="scripts/shBrushPython.js"></script><script type="text/javascript" src="scripts/shBrushRuby.js"></script><script type="text/javascript" src="scripts/shBrushScala.js"></script><script type="text/javascript" src="scripts/shBrushSql.js"></script><script type="text/javascript" src="scripts/shBrushVb.js"></script><script type="text/javascript" src="scripts/shBrushXml.js"></script><link type="text/css" rel="stylesheet" href="styles/shCore.css"/><link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/><script type="text/javascript">SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';SyntaxHighlighter.all();</script>

即可調用。

上一張最終

　　　　

 　 至此基本上完成了ckeditor實現上傳和代碼高亮顯示的功能，我自己也找了少資料，其中也遇到了不少小問題，最後差不多都解決了！

　  如有什麼不足或者錯誤之處還望指出。

     附上一份源碼  下載Demo