在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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 桥接模式下的手机-电脑-开发板连接
- 下一篇: 希尔排序算法的实现