快捷導(dǎo)航

asp.net CKEditor和CKFinder的應(yīng)用

更新時(shí)間：2010年01月24日 16:18:43 作者：

CKEditor和CKFinder在A(yíng)SP.NET中的應(yīng)用,需要的朋友可以參考下。

CKEditor是新一代的FCKeditor，是一個(gè)重新開(kāi)發(fā)的版本。CKEditor是全球最優(yōu)秀的網(wǎng)頁(yè)在線(xiàn)文字編輯器之一，因其驚人的性能與可擴(kuò)展性而廣泛的被運(yùn)用于各大網(wǎng)站。而CKFinder是一個(gè)功能強(qiáng)大的ajax文件管理器。其簡(jiǎn)單的用戶(hù)界面使得各類(lèi)用戶(hù)，不管是從高級(jí)專(zhuān)業(yè)人才，還是互聯(lián)網(wǎng)初學(xué)者，都?jí)蛑庇^(guān)、快速學(xué)習(xí)的學(xué)習(xí)使用它。

網(wǎng)址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
CKEditor 的使用
準(zhǔn)備工作
1. 下載CKEditor并將其解壓到Web根目錄下
2. 精簡(jiǎn)目錄：
_samples文件夾（示例文件，可以刪除）
_source文件夾（源程序文件，可以刪除）
changes.html(更新列表，可以刪除)
install.html(安裝指向，可以刪除)
license.html(使用許可，可以刪除)
CKEditor的配置（config.js文件）
詳細(xì)api參數(shù)見(jiàn):http://docs.cksource.com/ckeditor_api/,我的默認(rèn)配置

復(fù)制代碼代碼如下:

 
// 自定義 CKEditor 樣式 
CKEDITOR.editorConfig = function(config) { 
//配置默認(rèn)配置 
config.language = 'zh-cn'; //配置語(yǔ)言 
// config.uiColor = '#FFF'; //背景顏色 
// config.width = 400; //寬度 
// config.height = 400; //高度 
// config.skin = 'v2'; //編輯器皮膚樣式 
// 取消 “拖拽以改變尺寸”功能 
// config.resize_enabled = false; 
// 使用基礎(chǔ)工具欄 
// config.toolbar = "Basic"; 
// 使用全能工具欄 
config.toolbar = "Full"; 
//使用自定義工具欄 
// config.toolbar = 
// [ 
// ['Source', 'Preview', '-'], 
// ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ], 
// ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], 
// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'], 
// '/', 
// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'], 
// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], 
// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], 
// ['Link', 'Unlink', 'Anchor'], 
// '/', 
// ['Format', 'Font', 'FontSize'], 
// ['TextColor', 'BGColor'], 
// ['Maximize', 'ShowBlocks', '-', 'About'] 
// ]; 
}; 

CKEditor 的應(yīng)用
1. 在 aspx 頁(yè)面或者 master 模板頁(yè) <head> 標(biāo)簽中加載 ckeditor.js：
　 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. 修改頁(yè)面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>標(biāo)簽中使用ckeditor：

<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
4. 獲取或設(shè)置編輯器中的內(nèi)容
//獲取編輯器中的內(nèi)容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//設(shè)置編輯器中的內(nèi)容
//txtContent.Text = Server.HtmlDecode("<h1>設(shè)置內(nèi)容</h1>");

CKFinder 的使用
準(zhǔn)備工作
1. 下載CKFinder的Asp.NET版，將其解壓到Web根目錄下
2. 復(fù)制/bin/Release目錄下的ckfinder.dll文件至站點(diǎn)bin目錄
3. 精簡(jiǎn)目錄：
_samples文件夾（示例文件，可以刪除）
_source文件夾（源程序文件，可以刪除）
CKFinder的配置
1. 打開(kāi) " \ckfinder\config.ascx "，為SetConfig方法中的 BaseUrl 指定默認(rèn)路徑，如：
// 以u(píng)serfiles 為默認(rèn)路徑，其目錄下會(huì)自動(dòng)生成images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。

2. 與CKEditor集成
打開(kāi)CKEditor目錄中的config.js文件在function 函數(shù)中

復(fù)制代碼代碼如下:

 
// 自定義 CKEditor 樣式 
CKEDITOR.editorConfig = function(config) { 
…… 
}; 

加入如下內(nèi)容：

復(fù)制代碼代碼如下:

 
// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路徑選擇要正確。 
config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html'; 
config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images'; 
config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash'; 
config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; 
config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; 
config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; 
// config.filebrowserWindowWidth = '800'; 
// config.filebrowserWindowHeight = '500'; 

CKFinder的應(yīng)用
1. 在工具欄中添加站點(diǎn)根目錄bin目錄中的ckfinder.dll控件
2. 拖放控件到Web頁(yè)面
3. 修改CKFinder控件屬性BasePath為ckfinder目錄的相對(duì)路徑
常見(jiàn)問(wèn)題
1. 癥狀：因?yàn)榘踩?，文件不可瀏覽。請(qǐng)聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件。
原因：未設(shè)置用戶(hù)身份驗(yàn)證或者用戶(hù)未登錄。
語(yǔ)句：

復(fù)制代碼代碼如下:

 
public override bool CheckAuthentication() 
{ 
return false; 
} 

解決：在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用戶(hù)身份權(quán)限驗(yàn)證方法。
2. 癥狀：未知錯(cuò)誤
原因：設(shè)置不進(jìn)行用戶(hù)身份驗(yàn)證，但是 BaseUrl 路徑不對(duì)。
語(yǔ)句：

復(fù)制代碼代碼如下:

 
public override bool CheckAuthentication() 
{ 
return true ; 
} 

解決：在CKFinder的config.ascx文件中的public override void SetConfig() 修改

// 以u(píng)serfiles 為默認(rèn)路徑，其目錄下會(huì)自動(dòng)生成images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。

3. 癥狀：訪(fǎng)問(wèn)帶有CKFinder的頁(yè)面時(shí)報(bào)錯(cuò)“HTTP 錯(cuò)誤 404 - Not Found”
解決：修改CKFinder控件的BasePath屬性為ckfinder目錄的相對(duì)路徑

您可能感興趣的文章: