CKEditor與CKFinder的配置（ASP.NET環(huán)境）

estorm2008 2014-12-11

展開全文

CKEditor與CKFinder的配置（ASP.NET環(huán)境）

CKEditor是一個專門使用在網(wǎng)頁上的所得文字編輯器，適用于PHP、ASP.NET、Java等后端開發(fā)語言。CKEditor原名為FCKeditor，“FCK” 是這個編輯器的作者的名字Frederico Caldeira Knabben的縮寫。 09年發(fā)布更新到3.0，并改名為CKEditor，CK意指"Content and Knowledge"。新版的編輯器的更新包括：新的用戶界面，一個支持Plug-in的Javascript API，并提供對視覺障礙者的使用支持

CKEditor默認(rèn)是沒有“上傳功能”的，如果需要上傳則需要CKFinder插件。CKFinder是一個強大而易于使用的Web瀏覽器的Ajax文件管理器。其簡單的界面使得它直觀，快速學(xué)習(xí)的各類用戶，從高級人才到互聯(lián)網(wǎng)初學(xué)者。

1、下載程序包

① CKEditor

CKEditor每個版本都有好多類型，例如：“CKEditor 3.6.4 for ASP.NET”、“CKEditor 3.6.4 for Java”和“Standard”。由于CKEditor完全由JavaScript、CSS等前端技術(shù)開發(fā)完成，與后端語言無關(guān)，因此只要下載“Standard”版本即可。下載地址：Download | CKEditor.com

② CKFinder

CKFinder為CKEditor的一個“文件上傳和管理”的插件，CKFinder每個版本都有有PHP、Java、ASP和ASP.NET四種類型，根據(jù)開發(fā)需要選擇合適的類型，本文以ASP.NET版本為例，下載地址：CKFinder - Get Free Trial。

2、安裝和部署

① CKEditor

下載完成后解壓，將整個“ckeditor”放在網(wǎng)站的任意目錄下，本文是放在“/PlugIns/”目錄下，如下圖：

② CKFinder

下載好ASP.NET版本的CKFinder后并解壓，將整個“CKFinder”放在網(wǎng)站的任意目錄下，本文是放在“/PlugIns/”目錄下，如圖

3、簡單配置

CKEditor和CKFinder配置項比較多，也十分細(xì)。本文僅是簡單的配置保證能夠正常使用。

① /PlugIns/ckeditor/config.js

不同版本的CKEditor默認(rèn)配置并不相同，下面是我的習(xí)慣配置

CKEDITOR.editorConfig = function( config ) {
    config.language = 'zh-cn';  // 中文
    config.tabSpaces = 4;       // 當(dāng)用戶鍵入TAB時，編輯器走過的空格數(shù)，當(dāng)值為0時，焦點將移出編輯框
    config.toolbar = "Custom_RainMan";    // 工具條配置
    config.toolbar_Custom_RainMan = [
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord'],
        ['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','Templates','Source']
    ];
};

② /PlugIns/ckfinder/config.ascx

A、更改CheckAuthentication()的返回值

CheckAuthentication()返回True表示可以上傳，返回False則表示不能上傳，具體能否上傳需要開發(fā)者自己判斷，本文僅簡單更改為True（允許上傳）。

B、更改License和存儲目錄

如果沒有License則不用更改，CKFinder仍然可以正常使用，不過相關(guān)頁面中有少部分廣告。

CKFinder默認(rèn)的文件存儲目錄為"/ckfinder/userfiles/”，可以根據(jù)項目需求設(shè)置不同存儲目錄

③ 刪除“/ckfinder/_samples”和“/ckfinder/_source”兩個文件夾

刪除“/ckfinder/_samples”和“/ckfinder/_source”兩個文件夾，若不刪除則會出現(xiàn)“重復(fù)的"AssemblyCompany"特性”的錯誤，如下圖：

④ 添加CKFinder引用

將“/PlugIns/ckfinder/bin/Release/CKFinder.dll”添加到項目引用當(dāng)中

4、示例

創(chuàng)建編輯也比較簡單，引入兩JS文件，并使用JavaScript實例化即可，具體如下。

<html xmlns="http://www./1999/xhtml" >
<head>
  <title>Editor</title>
  <script type="text/javascript" src="/PlugIns/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="/PlugIns/ckfinder/ckfinder.js"></script>
</head>
<body>
  <textarea id ="post_content" name="post_content"><p>編輯器內(nèi)容</p></textarea>
  <script type="text/javascript">
      var editor = CKEDITOR.replace('post_content');          // 創(chuàng)建編輯器
      CKFinder.setupCKEditor(editor, '/PlugIns/ckfinder/');   // 為編輯器綁定"上傳控件"
  </script>
</body>
</html>

效果圖：