首頁 > 開發者 > ASP

asp.net CKEditor和CKFinder的應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁線上文字編輯器之一，因其驚人的效能與可擴充性而廣泛的被運用於各大網站。而CKFinder是一個功能強大的ajax檔案管理工具。其簡單的使用者介面使得各類使用者，不管是從進階專業人才，還是互連網初學者，都夠直觀、快速學習的學習使用它。

網址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
CKEditor 的使用
準備工作
1. 下載CKEditor並將其解壓到Web根目錄下
2. 精簡目錄：
_samples檔案夾（樣本檔案，可以刪除）
_source檔案夾（來源程式檔案，可以刪除）
changes.html(更新列表，可以刪除)
install.html(安裝指向，可以刪除)
license.html(使用許可，可以刪除)
CKEditor的配置（config.js檔案）
詳細api參數見:http://docs.cksource.com/ckeditor_api/,我的預設配置 複製代碼 代碼如下:// 自訂 CKEditor 樣式
CKEDITOR.editorConfig = function(config) {
//配置預設配置
config.language = 'zh-cn'; //配置語言
// config.uiColor = '#FFF'; //背景顏色
// config.width = 400; //寬度
// config.height = 400; //高度
// config.skin = 'v2'; //編輯器皮膚樣式
// 取消 “拖拽以改變尺寸”功能
// config.resize_enabled = false;
// 使用基礎工具列
// 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 的應用
1. 在 aspx 頁面或者 master 模板頁 <head> 標籤中載入 ckeditor.js：
　 <!-- 載入 CKEditor JS 檔案 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. 修改頁面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>標籤中使用ckeditor：
<!-- 使用 ckeditor 必須定義 class="ckeditor" -->
<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
4. 擷取或設定編輯器中的內容
//擷取編輯器中的內容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//設定編輯器中的內容
//txtContent.Text = Server.HtmlDecode("<h1>設定內容</h1>");

CKFinder 的使用
準備工作
1. 下載CKFinder的Asp.NET版，將其解壓到Web根目錄下
2. 複製/bin/Release目錄下的ckfinder.dll檔案至網站bin目錄
3. 精簡目錄：
_samples檔案夾（樣本檔案，可以刪除）
_source檔案夾（來源程式檔案，可以刪除）
CKFinder的配置
1. 開啟 " \ckfinder\config.ascx "，為SetConfig方法中的 BaseUrl 指定預設路徑，如：
// 以userfiles 為預設路徑，其目錄下會自動產生images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。

2. 與CKEditor整合
開啟CKEditor目錄中的config.js檔案在function 函數中 複製代碼 代碼如下:// 自訂 CKEditor 樣式
CKEDITOR.editorConfig = function(config) {
……
};

加入如下內容： 複製代碼 代碼如下:// 在 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的應用
1. 在工具列中添加網站根目錄bin目錄中的ckfinder.dll控制項
2. 拖放控制項到Web頁面
3. 修改CKFinder控制項屬性BasePath為ckfinder目錄的相對路徑
常見問題
1. 癥狀：因為安全原因，檔案不可瀏覽。請聯絡系統管理員並檢查CKFinder設定檔。
原因：未設定使用者身分識別驗證或者使用者未登入。
語句： 複製代碼 代碼如下:public override bool CheckAuthentication()
{
return false;
}

解決：在CKFinder的config.ascx檔案中修改public override bool CheckAuthentication() 加入使用者身份許可權驗證方法。
2. 癥狀：未知錯誤
原因：設定不進行使用者身分識別驗證，但是 BaseUrl 路徑不對。
語句： 複製代碼 代碼如下:public override bool CheckAuthentication()
{
return true ;
}

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

// 以userfiles 為預設路徑，其目錄下會自動產生images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。

3. 癥狀：訪問帶有CKFinder的頁面時報錯“HTTP 錯誤 404 - Not Found”
解決：修改CKFinder控制項的BasePath屬性為ckfinder目錄的相對路徑

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ckeditor tutorial php
相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More