华赐软件 Bootstrap3

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文件中的代码即可。

posted @ 2013-11-09 22:05  OpenCsharp.Net  阅读(261)  评论(0)  编辑  收藏  举报
华赐软件 Bootstrap3
w.huacisoft.com">华赐软件 Bootstrap3