首先,下載2個(gè)插件包
CKEditor下載地址:http://ckeditor.com/
CKFinder下載地址:http://ckfinder.com/
1.然后創(chuàng )建項目,將解壓的文件夾拷貝到項目中,編寫(xiě)頁(yè)面代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor._Default" ValidateRequest="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title></title> <!--引用腳本文件--> <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script></head><body> <form id="form1" runat="server"> <div> <asp:TextBox ID="Content" runat="server" TextMode="MultiLine" Height="250px" Width="500px"></asp:TextBox> <asp:Literal ID="Literal1" runat="server" ></asp:Literal> <asp:Button ID="Button1" runat="server" CssClass="ckeditor" OnClick="Button1_Click" Text="ok" /> </div> </form></body></html>
2.配置CKEditor下的config.js文件代碼如下:
CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'fr'; // config.uiColor = '#AADC6E'; config.language = 'zh-cn'; //中文 config.uiColor = '#54ADD8'; //編輯器顏色 config.font_names = '宋體;楷體_GB2312;新宋體;黑體;隸書(shū);幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; config.toolbar_Full = [ ['Source', '-', 'Preview', '-', 'Templates'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About'] ]; config.width =771; //寬度 config.height = 260; //高度 //如果需要使用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';};3.配置CKFinder下的Config.ascx文件:
首先配置下載權限
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. // return fase; return true;}其次配置Config.ascx服務(wù)器文件路徑,用于存儲圖片的文件夾
BaseUrl = " ~/ckfinder/userfiles/";
該路徑根據實(shí)際情況不同,設置也不同。
4.引用CKFinder文件中bin文件下的Release中ckfinder.dll否則會(huì )有錯誤。
至此配置已經(jīng)完成。
注意事項:
1.運行的時(shí)候,可能出現例如:System.Web.HttpRequestValidationException: 從客戶(hù)端(Content="<p>fdgdfgdfg</p>...")中檢測到有潛在危險的 Request.Form 值的錯誤,
該錯誤需要在頁(yè)面page標簽中添加validateRequest="false".
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor._Default" ValidateRequest="false" %>
1、常見(jiàn)錯誤排除方法:
ckfind文件夾的config.ascx中找到如下語(yǔ)句
癥狀:因為安全原因,文件不可瀏覽。請聯(lián)系系統管理員并檢查CKFinder配置文件。
語(yǔ)句:
public override bool CheckAuthentication()
{
reture false;
}
原因:未設置用戶(hù)身份驗證或者用戶(hù)未登錄,設置為 reture true;(不進(jìn)行用戶(hù)身份驗證)即可。
癥狀:未知錯誤
語(yǔ)句:
public override bool CheckAuthentication()
{
reture true;
}
原因:設置不進(jìn)行用戶(hù)身份驗證,但是 BaseUrl 路徑不對。
2、調試頁(yè)面,出現“A potentially dangerous Request.Form value was detected from the client",按照經(jīng)驗,在web.config中增加
<system.web>還是同樣錯誤,在頁(yè)面頭部加入,
還是出錯。
3、編譯的時(shí)候如果提示我AssemblyTitle、AssemblyCompany等屬性重復,該錯誤可能是ckeditor,ckfinder示例代碼中的AssemblyInfo.cs文件存在沖突,刪除示例代碼 source文件或者samples文件中的代碼即可。
聯(lián)系客服