zoukankan      html  css  js  c++  java

  • CKEditor与CKFinder整合

    CKEditor与CKFinder整合

    首先,下载2个插件包

    CKEditor下载地址：http://ckeditor.com/

    CKFinder下载地址：http://ckfinder.com/

    1.然后创建项目，将解压的文件夹拷贝到项目中，编写页面代码如下：

    1. <%@ Page Language="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="CKEditor._Default"ValidateRequest="false" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <htmlxmlns="http://www.w3.org/1999/xhtml">
    4. <headrunat="server">
    5. <title></title>
    6. <!--引用脚本文件-->
    7. <scripttype="text/javascript"language="javascript"src="ckeditor/ckeditor.js"></script>
    8. <scripttype="text/javascript"language="javascript"src="ckfinder/ckfinder.js"></script>
    9. </head>
    10. <body>
    11. <formid="form1"runat="server">
    12. <div>
    13. <asp:TextBoxID="Content"runat="server"TextMode="MultiLine"Height="250px"Width="500px"></asp:TextBox>
    14. <!--这句脚本代码必须放在文件后面-->
    15. <scripttype="text/javascript">
    16. CKEDITOR.replace('<%=Content.ClientID%>', {});
    17. var editor = CKEDITOR.replace('<%=Content.ClientID%>');
    18. CKFinder.SetupCKEditor(editor, '../ckfinder/');
    19. </script>
    20. <asp:LiteralID="Literal1"runat="server"></asp:Literal>
    21. <asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="ok"/>
    22. </div>
    23. </form>
    24. </body>
    25. </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.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文件代码如下：

    1. CKEDITOR.editorConfig = function( config )
    2. {
    3. // Define changes to default configuration here. For example:
    4. // config.language = 'fr';
    5. // config.uiColor = '#AADC6E';
    6. config.language = 'zh-cn'; //中文
    7. config.uiColor = '#54ADD8'; //编辑器颜色
    8. config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
    9. config.toolbar_Full =
    10. [
    11. ['Source', '-', 'Preview', '-', 'Templates'],
    12. ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
    13. ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    14. ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    15. '/',
    16. ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    17. ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
    18. ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    19. ['Link', 'Unlink', 'Anchor'],
    20. ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
    21. '/',
    22. ['Styles', 'Format', 'Font', 'FontSize'],
    23. ['TextColor', 'BGColor'],
    24. ['Maximize', 'ShowBlocks', '-', 'About']
    25. ];
    26. config.toolbar_Basic =
    27. [
    28. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
    29. ];
    30. config.width =771; //宽度
    31. config.height = 260; //高度
    32. //如果需要使用ckfinder上传功能必须添下列代码
    33. config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
    34. config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
    35. config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
    36. config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    37. config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    38. config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
    39. }; 
    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文件：

    首先配置下载权限

    1. public override bool CheckAuthentication()
    2. {
    3. // WARNING : DO NOT simply return "true". By doing so, you are allowing
    4. // "anyone" to upload and list the files in your server. You must implement
    5. // some kind of session validation here. Even something very simple as...
    6. //
    7. // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
    8. //
    9. // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
    10. // user logs on your system.
    11. // return fase;
    12. returntrue;
    13. } 
    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服务器文件路径，用于存储图片的文件夹

    [csharp] view plaincopyprint?
    1. BaseUrl = " ~/ckfinder/userfiles/"; 
    BaseUrl = " ~/ckfinder/userfiles/";

    该路径根据实际情况不同，设置也不同。

    4.引用CKFinder文件中bin文件下的Release中ckfinder.dll否则会有错误。

    至此配置已经完成。

    注意事项：

    1.运行的时候，可能出现例如：System.Web.HttpRequestValidationException: 从客户端(Content="<p>fdgdfgdfg</p>...")中检测到有潜在危险的 Request.Form 值的错误，

    该错误需要在页面page标签中添加validateRequest="false".

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

    2.编译的时候如果提示我AssemblyTitle、AssemblyCompany等属性重复，该错误可能是ckeditor,ckfinder示例代码中的AssemblyInfo.cs文件存在冲突，删除示例代码 source文件或者samples文件中的代码即可。 3、要精简 ckeditor 可以将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

    1、常见错误排除方法：

    ckfind文件夹的config.ascx中找到如下语句

    症状：因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。

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

    原因：未设置用户身份验证或者用户未登录，设置为 reture true;（不进行用户身份验证）即可。

    症状：未知错误

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

    原因：设置不进行用户身份验证，但是 BaseUrl 路径不对。

    2、调试页面，出现“A potentially dangerous Request.Form value was detected from the client",按照经验，在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等属性重复，该错误可能是ckeditor,ckfinder示例代码中的AssemblyInfo.cs文件存在冲突，删除示例代码 source文件或者samples文件中的代码即可。
  • 相关阅读:
    ADF_ADF基本概要（汇总）
    DBA_实践指南系列11_Oracle Erp R12性能调优基础（案例）
    DBA_实践指南系列10_Oracle Erp R12诊断功能Diagnostic（案例）
    DBA_实践指南系列9_Oracle Erp R12应用补丁AutoPatch/AutoControl/AutoConfig（案例）
    DBA_实践指南系列8_Oracle Erp R12数据维护模式Adadmin（案例）
    DBA_实践指南系列7_Oracle Erp R12监控OAM（案例）
    DBA_实践指南系列6_Oracle Erp R12工作流通知邮件配置Email（案例）
    DBA_实践指南系列5_Oracle Erp R12日常运维和管理（案例）
    DBA_实践指南系列4_Oracle Erp R12系统备份和恢复Backup（案例）
    DBA_实践指南系列3_Oracle Erp R12系统克隆Clone（案例）
  • 原文地址：https://www.cnblogs.com/xiexingen/p/2850176.html
Copyright © 2011-2022 走看看