电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

CKEditor＆ckfindtor

 quasiceo 2015-01-16
2012-01-05 00:20 9537人閱讀 評論(3) 收藏 舉報

目錄(?)[+]

前言

之前的項(xiàng)目中一直使用的是FCKeditor，昨天突然有個想法：為什么不試一下新的CKEditor呢？于是花了大半天的時間去學(xué)習(xí)它的用法，現(xiàn)在把我的學(xué)習(xí)過程與大家分享一下。

談起FCKeditor，相信沒幾個Web程序員不知道的吧。不過，官方已經(jīng)停止了該產(chǎn)品的更新，其最新版是2.6.6，于2010年2月15日發(fā)布。

取代FCKeditor的產(chǎn)品叫CKEditor（Content And Knowledge Editor），與其說是對FCKeditor的升級，不如說是全新的一個產(chǎn)品。相比FCKeditor，其加載速度更快，功能更強(qiáng)大，更豐富的插件和API，更友好的界面，生成的html更標(biāo)準(zhǔn)化。我們先一睹它的風(fēng)采吧。

它與FCKeditor最大的一個區(qū)別是CKEditor不集成文件上傳與管理功能（乍一看到，心里瓦涼瓦涼的），這部分被獨(dú)立出來放到另一個產(chǎn)品CKFinder中，這是一個商業(yè)授權(quán)的產(chǎn)品。CKEditor + CKFinder 兩者結(jié)合起來才算一個完整的在線編輯器，所以我會把它們的配置放到一起，畢竟兩者是缺一不可的。接下來我們看看如何在項(xiàng)目中使用它們吧。

(一)  下載和部署

目前CKEditor最新版為3.6.1，于2011-6-16發(fā)布。官方下載地址：http:///download。

CKEditor.NET，最新版為3.6.1，于2011-6-17發(fā)布，這是CKEditor的.Net的源碼項(xiàng)目。 官方下載地址：http:///download，請選擇ASP.NET版下載。

CKFinder的最新版為2.0.2.1，于2011-4-19發(fā)布。官方下載地址：http:///download，請選擇ASP.NET版本下載。

分別解壓下載下來的這3個文件，并把解壓后的ckeditor_3.6.1和ckfinder_aspnet_2.0.2.1文件夾拷貝到你的項(xiàng)目中（解壓出來后的文件夾原本是ckeditor和ckfinder，但我更習(xí)慣把他們的版本號也加上去，方便項(xiàng)目后期的追蹤），把“ckeditor_aspnet_3.6.1\bin\Release\CKEditor.NET.dll”和“ckfinder_aspnet_2.0.2.1\bin\Release\CKFinder.dll”這兩個文件拷貝到網(wǎng)站根目錄下的bin文件夾中，下面是部署后的目錄結(jié)構(gòu)圖。

注意：

1. 不要拷貝ckfinder_aspnet_2.0.2.1下的_source（源代碼項(xiàng)目）和bin文件夾，否則將導(dǎo)致無法成功編譯你原來的項(xiàng)目。

2. 你可以把CKEditor和CKFinder放到你喜歡的任意目錄中，然后正確配置他們的基路徑（接下來就會說到），這絲毫不影響使用。

(二)  配置和使用

CKFinder的必要配置

打開/editor/ckfinder_aspnet_2.0.2.1/ config.ascx文件，完成驗(yàn)證邏輯（非常重要）、設(shè)置文件保存路徑。

  1. public override bool CheckAuthentication()  
  2. {  
  3.     // WARNING : DO NOT simply return "true". By doing so, you are allowing  
  4.     // "anyone" to upload and list the files in your server. You must implement  
  5.     // some kind of session validation here. Even something very simple as...  
  6.     //  
  7.     //      return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );  
  8.     //  
  9.     // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the  
  10. // user logs on your system.  
  11. //重視上面這段話，在用戶試圖管理文件前，你必須在這里驗(yàn)證用戶是否有權(quán)限操作，  
  12. //比如檢查用戶是否登錄了，等等。如果驗(yàn)證成功，返回true，  
  13. //否則返回false以拒絕此操作。  
  14. //如果你直接返回true，這將是非常危險的，任何一個人，只要知道你ckfinder的路徑，  
  15. //都可以隨意上傳或者刪除文件，這將是毀滅性的  
  16.   
  17.     //return false;  
  18.     return true;  
  19. }  
  20.   
  21. /** 
  22.  * All configuration settings must be defined here. 
  23.  */  
  24. public override void SetConfig()  
  25. {  
  26.     // Paste your license name and key here. If left blank, CKFinder will  
  27.     // be fully functional, in Demo Mode.  
  28.     LicenseName = "";  
  29.     LicenseKey = "";  
  30.   
  31.     // The base URL used to reach files in CKFinder through the browser.  
  32. BaseUrl = "/ckfinder/userfiles/";   //在這里指明你想把上傳的文件放到哪里  
  33. // The phisical directory in the server where the file will end up. If  
  34. // blank, CKFinder attempts to resolve BaseUrl.  
  35. BaseDir = "";  
  36.   
  37. //后面還有代碼  
  38. //...  

接下來，你可以通過以下3種方式使用CKEditor，使用哪一種取決于你的偏好和習(xí)慣。

方式1 控件加載法

這是在.Net環(huán)境下最簡便的方式，對于習(xí)慣了拖控件的同志們來說，這是最好的方式，推薦使用。

1. 添加CKEditorControl控件

在Visual Studio左側(cè)的工具箱中點(diǎn)擊右鍵，在彈出的菜單中選擇“選擇項(xiàng)(I)…”①菜單，將彈出選擇工具箱項(xiàng)窗口，點(diǎn)擊“瀏覽”按鈕②在你網(wǎng)站根目錄的Bin文件夾中找到剛剛添加的CKEditor.NET.dll③，一路點(diǎn)確定完成。你會發(fā)現(xiàn)工具箱里多了一個叫“CKEditorControl”的控件，沒錯，那個就是我們需要的CKEditor編輯器控件。

2. 添加dll引用

右鍵點(diǎn)擊你的Web項(xiàng)目，選擇“添加引用(R)…”菜單，找到之前拷貝進(jìn)來的CKEditor.NET.dll和CKFinder.dll，點(diǎn)擊“確定”按鈕完成操作，見下圖。

3. 還等什么，趕快試用吧

雙擊該控件或直接把該控件拖放到你的aspx頁面中，并配置CKEditor的基路徑BasePath。

  1. <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"   
  2. BasePath="/editor/ckeditor_3.6.1/"></CKEditor:CKEditorControl>  

說明：若你的CKEditor放在根目錄的ckeditor文件夾中，你無需配置BasePath屬性，直接把控件拖到頁面中就能正常使用，CKEditor將自動搜索該路徑。CKFinder的默認(rèn)基路徑為根目錄下的ckfinder。下面提到的基路徑配置規(guī)則與此相同。

后臺代碼，必須創(chuàng)建一個CKFinder并綁定到CKEditor上，以使用文件上傳與管理功能。

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     CKFinder.FileBrowser fileBrowser = new CKFinder.FileBrowser();  
  4.     fileBrowser.BasePath = "/editor/ckfinder_aspnet_2.0.2.1/";  //設(shè)置CKFinder的基路徑  
  5.     fileBrowser.SetupCKEditor(CKEditorControl1);  
  6. }  

恭喜你，你已經(jīng)學(xué)會了CKEditor的使用方法，運(yùn)行頁面去體驗(yàn)一下吧。

方式2 使用官方原始的JavaScript方式加載

1. 必要的配置

打開/editor/ckeditor_3.6.1/config.js，配置CKEeditor的基路徑，如下：

  1. CKEDITOR.editorConfig = function( config )  
  2. {  
  3.     // Define changes to default configuration here. For example:  
  4.     // config.language = 'fr';  
  5.     // config.uiColor = '#AADC6E';    
  6.     basePath = '/editor/ckeditor_3.6.1/';   //配置CKEditor的根路徑  
  7.   
  8. };  

2. 使用

首先在頁面中引入CKEditor和CKFinder的js文件。

  1. <script src="/editor/ckeditor_3.6.1/ckeditor.js" type="text/javascript"></script>  
  2. <script src="/editor/ckfinder_aspnet_2.0.2.1/ckfinder.js" type="text/javascript"></script>  

初始化代碼，以下兩種方式都可以完成初始化。

  1. <!--方式1-->  
  2. <textarea id="content" name="content" class="ckeditor"><%=Request.Form["content"] %></textarea>  
  3. <script type="text/javascript">  
  4.     //綁定CKFinder到當(dāng)前編輯器中，第二個參數(shù)指定CKFinder的路徑  
  5.     CKFinder.setupCKEditor(null, '/editor/ckfinder_aspnet_2.0.2.1/');  
  6. </script>  
  7.   
  8. <!--方式2-->  
  9. <textarea id="content" name="content"><%=Request.Form["content"] %></textarea>  
  10. <script type="text/javascript">  
  11.     //在id為content的textarea處創(chuàng)建一個編輯器  
  12.     var editor = CKEDITOR.replace('content');   
  13.     //綁定CKFinder到當(dāng)前編輯器中，第二個參數(shù)指定CKFinder的路徑  
  14.     CKFinder.setupCKEditor(editor, '/editor/ckfinder_aspnet_2.0.2.1/');   
  15. </script>  


 

聰明的你一定注意到了，第一種初始化代碼并沒有顯式創(chuàng)建編輯器，textarea擁有css類名“ckeditor”而第二種沒有。默認(rèn)情況下，CKEditor會把頁面中所有擁有css類名為“ckeditor”的textarea都創(chuàng)建為編輯器，你可以親自試一下。

 

方式3 通過官方的jQuery適配器加載

首先引入必要的js

  1. <script src="/js/jquery/jquery-1.6.2.js" type="text/javascript"></script>  
  2. <script src="/editor/ckeditor_3.6.1/ckeditor.js" type="text/javascript"></script>  
  3. <!--注意 適配器js必須放在ckeditor.js后面，否則將會出錯，因?yàn)檫m配器需要引用ckeditor.js里面定義的類-->  
  4. <script src="/editor/ckeditor_3.6.1/adapters/jquery.js" type="text/javascript"></script>  
  5. <script src="/editor/ckfinder_aspnet_2.0.2.1/ckfinder.js" type="text/javascript"></script>  

編寫初始化代碼

  1. <textarea id="content" name="content"><%=Request.Form["content"] %></textarea>  
  2. <script type="text/javascript">  
  3.     $(function() {  
  4.         //利用jQuery加載  
  5.         $('#content').ckeditor();  
  6.         //綁定CKFinder到當(dāng)前編輯器中，第二個參數(shù)指定CKFinder的路徑  
  7.         CKFinder.setupCKEditor(null, '/editor/ckfinder_aspnet_2.0.2.1/');  
  8.     });  
  9. </script>  

(三) 精簡你的CKEditor

解壓后的CKEditor文件夾占用空間7M多，還是挺大的，讓我們把沒必要的東西清理一下吧，我的Editor我做主。

_samples：里面放的是示例，刪除。

_source：存放的是開發(fā)用的源文件，不需要，刪除。

adapters：如果你不使用jQuery方式來初始化CKEditor（上面的第3種方式），可以刪除。

images：必要的文件，保留。

plugins：存放的是插件，有一些是CKEditor必須使用的，全部保留吧。

lang：里面放的是語言文件，保留_languages.js、zh-cn.js和en.js這3個文件，其它全部刪除。

themes：必要的文件，保留。

skins：存放的是皮膚文件，默認(rèn)的皮膚是kama，其它兩個覺得用不到的話可以直接刪除。

刪除CKEditor根目錄下的.htaccess、CHANGES.html、ckeditor.asp、ckeditor.pack、ckeditor.php、ckeditor_basic.js、ckeditor_basic_source.js、ckeditor_php4.php、ckeditor_php5.php、ckeditor_source.js和INSTALL.html共11個文件。

以下是清理前后的對比：


(四) CKFinder版權(quán)的破解

CKFinder要商業(yè)授權(quán)才能使用的，未授權(quán)時在使用中會跳出一些版本信息，雖然不影響正常使用，但不喜歡的可以把它去掉，破解的版本為2.0.2.1，其它版本可能會不同。

注意：此方法僅供個人學(xué)習(xí)用，請不要在商業(yè)中使用！



打開CKFinder下的ckfinder.js文件，搜索“message_content”（不包括雙引號），會找到以下片段：<h4 class='message_content' '></h4>，批發(fā)它 改為<h4 class='message_content' style='display:none;'></h4>，讓它隱藏。

搜索“\x3c\144\x69\x76\040\143\x6c\x61\163\x73\075\x27\166\x69\x65\x77\040\x74\x6f\157\154\137\160\141\x6e\145\154\047\040\x73\164\x79\154\x65\075\047\x64\x69\163\160\x6c\141\x79\x3a\040\142\154\x6f\x63\153\x20\041\151\155\160\x6f\162\164\141\156\164\x3b\040\160\157\163\x69\x74\x69\157\x6e\x3a\040\163\164\x61\164\x69\143\x20\x21\x69\x6d\160\157\x72\x74\141\156\164\x3b\x20\x63\157\154\x6f\x72\x3a\x20\x62\x6c\141\x63\153\x20\041\x69\155\160\157\x72\164\141\x6e\x74\x3b\x20\x62\141\x63\153\147\162\x6f\165\x6e\144\055\x63\157\154\x6f\x72\072\040\x77\x68\x69\164\145\x20\041\151\x6d\x70\157\162\164\141\156\164\073\x27\x3e\x54\150\151\163\x20\151\x73\x20\x74\150\x65\x20\x44\x45\115\117\040\x76\145\162\163\151\x6f\x6e\040\x6f\x66\x20\x43\113\x46\x69\x6e\144\x65\x72\x2e\040\x50\154\145\141\x73\x65\040\166\151\163\x69\x74\040\x74\x68\x65\040\x3c\x61\x20\150\162\145\x66\075\x27\x68\164\x74\160\x3a\057\057\143\153\146\x69\156\x64\x65\x72\x2e\143\157\x6d\x27\x20\164\x61\x72\x67\x65\164\075\x27\137\142\154\141\156\153\047\x3e\103\113\106\151\x6e\x64\145\162\x20\x77\x65\142\040\x73\151\x74\145\074\x2f\141\x3e\x20\164\157\040\157\x62\x74\x61\151\x6e\x20\x61\x20\x76\x61\154\151\144\x20\x6c\151\x63\x65\x6e\163\145\x2e\074\057\144\x69\x76\076”（不包括雙引號），把這一串字符改為“\x20”。

其實(shí)上面那些符號都是JavaScript的轉(zhuǎn)義字符，其對應(yīng)的是“<div class='view tool_panel' style='display: block !important; position: static !important; color: black !important; background-color: white !important;'>This is the DEMO version of CKFinder. Please visit the <a href='http://' target='_blank'>CKFinder web site</a> to obtain a valid license.</div>”，即左下角那些文字。

后記

以上僅僅是CKEditor的基本用法，基本上能滿足一般的需要。要想真正了解并用好它，還得下一番苦功夫。試用后感覺很不錯，特別是官方的API文檔，很詳細(xì)很給力。

官方文檔：http://docs./

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多