當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

發布時間：2023/12/9 asp.net 35 豆豆

生活随笔收集整理的這篇文章主要介紹了在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

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

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

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

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

(一)? 下載和部署

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

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

CKFinder的最新版為2.0.2.1，于2011-4-19發布。官方下載地址：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”這兩個文件拷貝到網站根目錄下的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

public override bool CheckAuthentication()?

??? // WARNING : DO NOT simply return "true". By doing so, you are allowing?

??? // "anyone" to upload and list the files in your server. You must implement?

??? // some kind of session validation here. Even something very simple as...?

??? //?

??? //????? return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );?

??? //?

??? // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the?

// user logs on your system.?

//重視上面這段話，在用戶試圖管理文件前，你必須在這里驗證用戶是否有權限操作，?

//比如檢查用戶是否登錄了，等等。如果驗證成功，返回true，?

//否則返回false以拒絕此操作。?

//如果你直接返回true，這將是非常危險的，任何一個人，只要知道你ckfinder的路徑，?

//都可以隨意上傳或者刪除文件，這將是毀滅性的?

??? //return false;?

??? return true;?

/**

* All configuration settings must be defined here.

*/?

public override void SetConfig()?

??? // Paste your license name and key here. If left blank, CKFinder will?

??? // be fully functional, in Demo Mode.?

??? LicenseName = "";?

??? LicenseKey = "";?

??? // The base URL used to reach files in CKFinder through the browser.?

BaseUrl = "/ckfinder/userfiles/";?? //在這里指明你想把上傳的文件放到哪里?

// The phisical directory in the server where the file will end up. If?

// blank, CKFinder attempts to resolve BaseUrl.?

BaseDir = "";?

//后面還有代碼?

//...?

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

方式1 控件加載法

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

1. 添加CKEditorControl控件

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

2. 添加dll引用

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

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

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

view plain

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"??

BasePath="/editor/ckeditor_3.6.1/"></CKEditor:CKEditorControl>?

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

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

view plain

protected void Page_Load(object sender, EventArgs e)?

??? CKFinder.FileBrowser fileBrowser = new CKFinder.FileBrowser();?

??? fileBrowser.BasePath = "/editor/ckfinder_aspnet_2.0.2.1/";? //設置CKFinder的基路徑?

??? fileBrowser.SetupCKEditor(CKEditorControl1);?

恭喜你，你已經學會了CKEditor的使用方法，運行頁面去體驗一下吧。

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

1. 必要的配置

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

view plain

CKEDITOR.editorConfig = function( config )?

??? // Define changes to default configuration here. For example:?

??? // config.language = 'fr';?

??? // config.uiColor = '#AADC6E';? ?

??? basePath = '/editor/ckeditor_3.6.1/';?? //配置CKEditor的根路徑?

};?

2. 使用

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

view plain

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

view plain

?

<textarea id="content" name="content" class="ckeditor"><%=Request.Form["content"] %></textarea>?

??? //綁定CKFinder到當前編輯器中，第二個參數指定CKFinder的路徑?

??? CKFinder.setupCKEditor(null, '/editor/ckfinder_aspnet_2.0.2.1/');?

</script>?

?

<textarea id="content" name="content"><%=Request.Form["content"] %></textarea>?

??? //在id為content的textarea處創建一個編輯器?

??? var editor = CKEDITOR.replace('content');??

??? //綁定CKFinder到當前編輯器中，第二個參數指定CKFinder的路徑?

??? CKFinder.setupCKEditor(editor, '/editor/ckfinder_aspnet_2.0.2.1/');??

</script>?

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

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

首先引入必要的js

view plain

?

編寫初始化代碼

view plain

<textarea id="content" name="content"><%=Request.Form["content"] %></textarea>?

??? $(function() {?

??????? //利用jQuery加載?

??????? $('#content').ckeditor();?

??????? //綁定CKFinder到當前編輯器中，第二個參數指定CKFinder的路徑?

??????? CKFinder.setupCKEditor(null, '/editor/ckfinder_aspnet_2.0.2.1/');?

??? });?

</script>?

(三) 精簡你的CKEditor

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

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

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

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要商業授權才能使用的，未授權時在使用中會跳出一些版本信息，雖然不影響正常使用，但不喜歡的可以把它去掉，破解的版本為2.0.2.1，其它版本可能會不同。

注意：此方法僅供個人學習用，請不要在商業中使用！

打開CKFinder下的ckfinder.js文件，搜索“message_content”（不包括雙引號），會找到以下片段：<h4 class='message_content' '></h4>，批發它改為<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的轉義字符，其對應的是“<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/

轉載于:https://www.cnblogs.com/yongzhengye/p/4218091.html

總結

以上是生活随笔為你收集整理的在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：桥接模式下的手机-电脑-开发板连接
下一篇： Ajax入门（创建 XMLHttpReq