ASP.NET MVC 環境下CKeditor 的配置以及用jQuery進行數據存取操作

　　由於項目中要用到富文本編輯器，在網上搜到一些關於FCKeditor和CKeditor配置的文章，但實際在項目中用起來還是有些出入。因此，在這裏跟大家一起分享下自己在配置CKeditor的過程，本人菜鳥一隻，如有不對的地方，還請各位大蝦和朋友指正。

     在網上關於FCKeditor的配置文章稍微多一些，但是FCKeditor相對於CKeditor加載較慢，於是我選擇了CKeditor。

　　第一步：下載

　　下載地址：http://ckeditor.com/download，最新版本是CKEditor 3.4.1。同時也附有FCKeditor相應版本的下載，.net與java都有對應的版本，大家各取所需。在這裏，我們只需要下載CKEditor 3.4.1。

　　下載到硬盤，然後解壓縮，並將editor整個文件夾放到.net 項目所在的根目錄下面。如果需要用到圖片和文件的上傳功能，則還需要下載CKfinder,它跟CKEditor 是配套一起使用的。同樣的解壓縮放到項目所在的根目錄下。如下圖所示：

　

　　第二步：配置

　　接下來要配置自己需要的編輯器。打開CKeditor下面的config.js進行編輯，面板上不需要的工具可以註釋掉，還能設置長度和高度等等。相關的配置網上很多，以下是我的配置可以參考。

 

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    // 界面語言，默認爲 'en'

    config.language = 'zh-cn';

    // 設置寬高

    config.width = 550;

    config.height = 185;

    // 編輯器樣式，有三種：'kama'（默認）、'office2003'、'v2'

    config.skin = 'v2';

    // 背景顏色

    config.uiColor = '#FFF';

    //config.toolbar = 'Basic';
    config.toolbar = 'Full';

　　//工具欄的配置
    config.toolbar_Full = [
['Source', '-', 'NewPage', 'Preview', '-', 'Templates'],  //,'Save'去掉保存按鈕，這個已經被我註釋掉

//['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'],

['Maximize','ShowBlocks','-','About']
    ];

    config.toolbarCanCollapse = true;

　　//以下六行是上傳路徑的配置，這裏是配置的aspx的頁面，如果是在jsp，php，或者asp頁面中，則需要把aspx換成相應的後綴名

    config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images';

    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=Images';

    config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

    config.filebrowserWindowWidth = '800';  

    config.filebrowserWindowHeight = '500';
    //工具欄默認是否展開
    config.toolbarStartupExpanded = false;
    // 當提交包含有此編輯器的表單時，是否自動更新元素內的數據
    config.autoUpdateElement = true;

};

　　第三步：使用

　　在你要用到編輯器的網頁裏面分別引用ckeditor.js,ckfinder.js腳本：

　　<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

　　<script type="text/javascript" src="../ckeditor/ckfinder.js"></script>

　　注意紅色部分，這裏根據你自己的編輯器路徑修改，請務必配置正確。

　　比如在我的項目中，它們的實際路徑分別是：

　　<script type="text/javascript" src="http://www.cnblogs.com/../ckeditor/ckeditor.js"></script>
     <script type="text/ecmascript" src="http://www.cnblogs.com/../ckfinder/ckfinder.js"></script>

　　然後在頁面中創建一個<textarea>標籤，因爲CKeditor是以textarea爲基礎的，代碼如下：

　　<textarea id="ckeditor" cols="20" rows="2" ></textarea>

　　緊接着實例化ckeditor，js代碼如下：

　　var myEditor = CKEDITOR.instances.ckeditor;  //這裏的ckeditor即textarea的id，“CKEDITOR.instances”是CKeditor自己提供的方法，可以直接使用。

　　第四步：獲取和設置編輯器內容

　　實例化的CKeditor可以通過getData()和setData()來獲取編輯器中的內容和設置編輯器中的內容，這兩個方法也是CKeditor自己提供的方法,可以直接使用。

　　var getEditorContent = myEditor.getData();//獲取內容

　　myEditor.setData("the set content"); //設置內容

　　但是，此時還不能進行上傳圖片和附件，如果需要上傳，實例化ckeditor的時候有所不同，代碼如下：

　　var myEditor = CKEDITOR.replace('ckeditor',
        {
            filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
            filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
            filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',
            filebrowserUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
            filebrowserImageUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
            filebrowserFlashUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
        });

　　這是別人文章中寫到的，代碼較多，我覺得應該用不着這麼多代碼，時間緊迫也沒有花更多功夫去研究，就湊合着用了。有了這段代碼後，你的編輯器就可以上傳圖片和附件啦。

　　如圖所示：如果用剛開始的實例化方法的話，這裏沒有“上傳”按鈕。

　　第五步：總結

　　1.ckeditor雖好，但是也有自身的缺點，加載比較慢，而且不能直接把編輯器中的內容進行保存。必須要取出來，然後存到一個容器裏，如<input type='text'>標籤中，或者其他方法，再向後臺傳數據。

　　2. 亂碼問題。由於編輯器中的內容經過getData解析後，會加上各種修飾的標籤，如<b></b><p></p>等等，往後後臺傳的時候，ASP.NET MVC會對其進行解析"<"就成了“&alt;”等類似的符號，這對後臺來說是錯誤的數據，並且不能進行保存。這裏提供一個我的解決方法，就是對前臺取出的數據進行二次解析，可以用ckeditor自帶的方法，代碼如下：

　　CKEDITOR.tools.htmlEncode(myEditor.getData());

　　同時後臺也要進行解析，代碼如下：

　　“表中某字段” = Server.HtmlDecode("前臺數據");

　　這樣就可以順利保存啦。

　　先就跟大家分享這麼多啦。