CKEditor與CKFinder整合

XXG學(xué)習(xí)園 2012-04-21

展開全文

CKEditor與CKFinder整合

首先,下載2個插件包

CKEditor下載地址：http:///

CKFinder下載地址：http:///

1.然后創(chuàng)建項目，將解壓的文件夾拷貝到項目中，編寫頁面代碼如下：

<%@ 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./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>
<script type="text/javascript">
CKEDITOR.replace('<%=Content.ClientID%>', {});
var editor = CKEDITOR.replace('<%=Content.ClientID%>');
CKFinder.SetupCKEditor(editor, '../ckfinder/');
</script>
<asp:Literal ID="Literal1" runat="server" ></asp:Literal>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ok" />
</div>
</form>
</body>
</html>

<%@ 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./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./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;新宋體;黑體;隸書;幼圓;微軟雅黑;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';
};

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;新宋體;黑體;隸書;幼圓;微軟雅黑;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文件：

首先配置下載權(quán)限

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;
}

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ù)器文件路徑，用于存儲圖片的文件夾

[csharp] view plain copy print ?

BaseUrl = " ~/ckfinder/userfiles/";

BaseUrl = " ~/ckfinder/userfiles/";

該路徑根據(jù)實際情況不同，設(shè)置也不同。

4.引用CKFinder文件中bin文件下的Release中ckfinder.dll否則會有錯誤。

至此配置已經(jīng)完成。

注意事項：

1.運行的時候，可能出現(xiàn)例如：System.Web.HttpRequestValidationException: 從客戶端(Content="<p>fdgdfgdfg</p>...")中檢測到有潛在危險的 Request.Form 值的錯誤，

該錯誤需要在頁面page標(biāo)簽中添加validateRequest="false".

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor._Default" ValidateRequest="false" %>

2.編譯的時候如果提示我AssemblyTitle、AssemblyCompany等屬性重復(fù)，該錯誤可能是ckeditor,ckfinder示例代碼中的AssemblyInfo.cs文件存在沖突，刪除示例代碼 source文件或者samples文件中的代碼即可。
3、要精簡 ckeditor 可以將 _samples、_source 文件夾刪除，lang 目錄下可以只保留en.js、zh.js、zh-cn.js 三個語言文件。

1、常見錯誤排除方法：

ckfind文件夾的config.ascx中找到如下語句

癥狀：因為安全原因，文件不可瀏覽。請聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件。

語句：
public override bool CheckAuthentication()
{
　　reture false;
}

原因：未設(shè)置用戶身份驗證或者用戶未登錄，設(shè)置為 reture true;（不進(jìn)行用戶身份驗證）即可。

癥狀：未知錯誤

語句：
public override bool CheckAuthentication()
{
　　reture true;
}

原因：設(shè)置不進(jìn)行用戶身份驗證，但是 BaseUrl 路徑不對。

2、調(diào)試頁面，出現(xiàn)“A potentially dangerous Request.Form value was detected from the client",按照經(jīng)驗，在web.config中增加

<system.web>
<pages validateRequest="false" />
system.web>

還是同樣錯誤，在頁面頭部加入，

還是出錯。

vs2008 以下在頁面直接改validateRequest="false"，如果你是vs2010的話在頁面直接改validateRequest="false"，還得把 webconfig 中的 <httpRuntime requestValidationMode="4.0"/> 改為 <httpRuntime requestValidationMode="3.5"/>降低下版本

3、編譯的時候如果提示我AssemblyTitle、AssemblyCompany等屬性重復(fù)，該錯誤可能是ckeditor,ckfinder示例代碼中的AssemblyInfo.cs文件存在沖突，刪除示例代碼 source文件或者samples文件中的代碼即可。