在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言
之前的項目中一直使用的是FCKeditor，昨天突然有個想法：為什么不試一下新的CKEditor呢？于是花了大半天的時間去學習它的用法，現(xiàn)在把我的學習過程與大家分享一下。
談起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，其加載速度更快，功能更強大，更豐富的插件和API，更友好的界面，生成的html更標準化。我們先一睹它的風采吧。
它與FCKeditor最大的一個區(qū)別是CKEditor不集成文件上傳與管理功能（乍一看到，心里瓦涼瓦涼的），這部分被獨立出來放到另一個產(chǎn)品CKFinder中，這是一個商業(yè)授權的產(chǎn)品。CKEditor + CKFinder 兩者結合起來才算一個完整的在線編輯器，所以我會把它們的配置放到一起，畢竟兩者是缺一不可的。接下來我們看看如何在項目中使用它們吧。
(一)? 下載和部署
目前CKEditor最新版為3.6.1，于2011-6-16發(fā)布。官方下載地址：http://ckeditor.com/download。
CKEditor.NET，最新版為3.6.1，于2011-6-17發(fā)布，這是CKEditor的.Net的源碼項目。 官方下載地址：http://ckeditor.com/download，請選擇ASP.NET版下載。
CKFinder的最新版為2.0.2.1，于2011-4-19發(fā)布。官方下載地址：http://ckfinder.com/download，請選擇ASP.NET版本下載。
分別解壓下載下來的這3個文件，并把解壓后的ckeditor_3.6.1和ckfinder_aspnet_2.0.2.1文件夾拷貝到你的項目中（解壓出來后的文件夾原本是ckeditor和ckfinder，但我更習慣把他們的版本號也加上去，方便項目后期的追蹤），把“ckeditor_aspnet_3.6.1\bin\Release\CKEditor.NET.dll”和“ckfinder_aspnet_2.0.2.1\bin\Release\CKFinder.dll”這兩個文件拷貝到網(wǎng)站根目錄下的bin文件夾中，下面是部署后的目錄結構圖。
注意：
1. 不要拷貝ckfinder_aspnet_2.0.2.1下的_source（源代碼項目）和bin文件夾，否則將導致無法成功編譯你原來的項目。
2. 你可以把CKEditor和CKFinder放到你喜歡的任意目錄中，然后正確配置他們的基路徑（接下來就會說到），這絲毫不影響使用。
(二)? 配置和使用
CKFinder的必要配置
打開/editor/ckfinder_aspnet_2.0.2.1/ config.ascx文件，完成驗證邏輯（非常重要）、設置文件保存路徑。
view plain接下來，你可以通過以下3種方式使用CKEditor，使用哪一種取決于你的偏好和習慣。
方式1 控件加載法
這是在.Net環(huán)境下最簡便的方式，對于習慣了拖控件的同志們來說，這是最好的方式，推薦使用。
1. 添加CKEditorControl控件
在Visual Studio左側的工具箱中點擊右鍵，在彈出的菜單中選擇“選擇項(I)…”①菜單，將彈出選擇工具箱項窗口，點擊“瀏覽”按鈕②在你網(wǎng)站根目錄的Bin文件夾中找到剛剛添加的CKEditor.NET.dll③，一路點確定完成。你會發(fā)現(xiàn)工具箱里多了一個叫“CKEditorControl”的控件，沒錯，那個就是我們需要的CKEditor編輯器控件。
2. 添加dll引用
右鍵點擊你的Web項目，選擇“添加引用(R)…”菜單，找到之前拷貝進來的CKEditor.NET.dll和CKFinder.dll，點擊“確定”按鈕完成操作，見下圖。
3. 還等什么，趕快試用吧
雙擊該控件或直接把該控件拖放到你的aspx頁面中，并配置CKEditor的基路徑BasePath。
view plain說明：若你的CKEditor放在根目錄的ckeditor文件夾中，你無需配置BasePath屬性，直接把控件拖到頁面中就能正常使用，CKEditor將自動搜索該路徑。CKFinder的默認基路徑為根目錄下的ckfinder。下面提到的基路徑配置規(guī)則與此相同。
后臺代碼，必須創(chuàng)建一個CKFinder并綁定到CKEditor上，以使用文件上傳與管理功能。
view plain恭喜你，你已經(jīng)學會了CKEditor的使用方法，運行頁面去體驗一下吧。
方式2 使用官方原始的JavaScript方式加載
1. 必要的配置
打開/editor/ckeditor_3.6.1/config.js，配置CKEeditor的基路徑，如下：
view plain2. 使用
首先在頁面中引入CKEditor和CKFinder的js文件。
view plain初始化代碼，以下兩種方式都可以完成初始化。
view plain?
聰明的你一定注意到了，第一種初始化代碼并沒有顯式創(chuàng)建編輯器，textarea擁有css類名“ckeditor”而第二種沒有。默認情況下，CKEditor會把頁面中所有擁有css類名為“ckeditor”的textarea都創(chuàng)建為編輯器，你可以親自試一下。
?
方式3 通過官方的jQuery適配器加載
首先引入必要的js
view plain編寫初始化代碼
view plain(三) 精簡你的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：存放的是皮膚文件，默認的皮膚是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版權的破解
CKFinder要商業(yè)授權才能使用的，未授權時在使用中會跳出一些版本信息，雖然不影響正常使用，但不喜歡的可以把它去掉，破解的版本為2.0.2.1，其它版本可能會不同。
注意：此方法僅供個人學習用，請不要在商業(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”。
其實上面那些符號都是JavaScript的轉(zhuǎn)義字符，其對應的是“<div class='view tool_panel' style='display: block !important; position: static !important; color: black !important; '>This is the DEMO version of CKFinder. Please visit the <a href='http://ckfinder.com' target='_blank'>CKFinder web site</a> to obtain a valid license.</div>”，即左下角那些文字。
后記
以上僅僅是CKEditor的基本用法，基本上能滿足一般的需要。要想真正了解并用好它，還得下一番苦功夫。試用后感覺很不錯，特別是官方的API文檔，很詳細很給力。
官方文檔：http://docs.cksource.com/
轉(zhuǎn)載于:https://www.cnblogs.com/yongzhengye/p/4218091.html
總結
以上是生活随笔為你收集整理的在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 桥接模式下的手机-电脑-开发板连接
- 下一篇： 希尔排序算法的实现