• CKEditor与CKFinder整合 MVC3


    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了。于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病。

    所以记录一下自己东西编写除错的过程

    首先,下载2个插件包

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

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

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

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


     

    2.配置CKEditor下的config.js文件代码如下:

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


     

    3.配置CKFinder下的Config.ascx文件:

    首先配置下载权限

    [javascript] view plaincopy
     
    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.   return true;  
    13. }  


     

    其次配置Config.ascx服务器文件路径,用于存储图片的文件夹

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


     

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

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

    至此配置已经完成。

    注意事项:

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

    该错误需要在页面page标签中添加validateRequest="false". 也可以在MVC后台设置:[ValidateInput(false)]//目的是为了防止在提交时报“检测到有潜在危险的客户端输入值”

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

    2.编译的时候如果提示我AssemblyTitle、AssemblyCompany等属性重复,该错误可能是ckeditor,ckfinder示例代码中的AssemblyInfo.cs文件存在冲突,删除示例代码 source文件或者samples文件中的代码即可。

  • 相关阅读:
    解决微信OAuth2.0网页授权回调域名只能设置一个的问题
    js中window.location.search的用法和作用。
    在T-SQL语句中访问远程数据库
    C# 解析 json
    C#后台执行JS
    WhereHows前后端配置文件
    jar打包混淆上传全自动日志
    quartz中设置Job不并发执行
    解决eclipse maven 项目重新下载包这个问题
    Sublime Text 3中文乱码问题解决(最新)
  • 原文地址:https://www.cnblogs.com/8090sns/p/3416140.html
Copyright © 2020-2023  润新知