今天偶然看到一篇关于 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. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title></title>
  6. <!--引用脚本文件-->
  7. <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>
  8. <script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div>
  13. <asp:TextBox ID="Content" runat="server" TextMode="MultiLine" Height="250px" Width="500px"></asp:TextBox>
  14. <!--这句脚本代码必须放在文件后面-->
  15. <script type="text/javascript">
  16. CKEDITOR.replace('<%=Content.ClientID%>', {});
  17. var editor = CKEDITOR.replace('<%=Content.ClientID%>');
  18. CKFinder.SetupCKEditor(editor, '../ckfinder/');
  19. </script>
  20. <asp:Literal ID="Literal1" runat="server" ></asp:Literal>
  21. <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ok" />
  22. </div>
  23. </form>
  24. </body>
  25. </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. };

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. return true;
  13. }

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

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

CKEditor与CKFinder整合 MVC3的更多相关文章

  1. CKEditor和CKFinder整合实现上传下载功能

    CKEditor与CKFinder整合并实现文件上传功能 事先说明:此整合的是java版本号的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其他框架技术) ...

  2. extjs4与ckeditor、ckfinder整合

    <script type="text/javascript"src="<?php echo Yii::app()->request->baseUr ...

  3. CKEditor与CKFinder整合并实现文件上传功能

    事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一．需要的资源: 用到的网站,文件自己下载: a) cked ...

  4. CKEditor与CKFinder学习--自定义界面及按钮事件捕获

    原文地址:CKEditor与CKFinder学习--自定义界面及按钮事件捕获  讨厌CSDN的广告,吃香太难看! 效果图 界面操作图 原始界面 调整后的界面(删除了flush,表单元素等) 该界面的皮 ...

  5. ckeditor与ckfinder简单整合使用

    Ckeditor与ckfinder简单整合使用 功能:主要用来发送图文的email,图片上传到本地服务器,但是email的图片地址要写上该服务器的远程地址(图片地址:例如:http://www.bai ...

  6. Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

    先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  8. 编辑控件CKEditor和CKFinder

    -使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...

  9. 在JSP里使用CKEditor和CKFinder

    在JSP里使用CKEditor和CKFinder 最 近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功 ...

随机推荐

  1. PSP&进度条

    11号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小 ...

  2. iOS进阶_地图上定位的标志——大头针

    一.添加大头针 地图使用的框架是MapKit 大头针走的是MKAnnotation协议 /* 注意:因为是满足协议MKAnnotation,所以没有MKAnnotation的系统大头针类,必须自定义大 ...

  3. php下xcache的安装

    下载xcache: wget http://xcache.lighttpd.net/pub/Releases/3.2.0/xcache-3.2.0.tar.gz 安装: tar zxvf xcache ...

  4. Runtime消息传送

    person.h #import<Foundation/Foundation.h> @interfacePerson :NSObject + (void)eat; - (void)run: ...

  5. App开发如何利用Fidder，在api接口还没有实现的情况下模拟数据，继续开发

    相信app开发很多时候,都是等后台出接口,拿到数据调试错误.殊不知,我们完全可以不用等,只要有约定好的接口定义文档,借助工具就能做到,自己模拟数据返回~      下面主要是在项目组开发过程中,使用F ...

  6. 让你的Android程序更省电

    app主要耗电的原因如下: 1 cpu频繁的运转 -----控制线程 2  大数据量的传输----- 数据压缩传输 3  不停的在网络间切换------------判断网络状体 4 人开发的程序后台都 ...

  7. MongoDB for C#基础入门

    笔者这里采用的是mongoDB官网推荐使用.net驱动: http://mongodb.github.io/mongo-csharp-driver/2.0/getting_started/quick_ ...

  8. Java中类继承、接口实现的一些细节（长期更新）

    前言 在Java中,子类继承父类,类实现接口是属于常识性的内容了,作为一个Java程序员应该也比较熟悉.不过子类继承父类,类实现接口中还是有一些小细节值得注意一下,本文就从个人工作.学习中入手,总结一 ...

  9. AMD加载器实现笔记（五）

    前几篇文章对AMD规范中的config属性几乎全部支持了,这一节主要是进一步完善.到目前为止我们的加载器还无法处理环形依赖的问题,这一节就是解决环形依赖. 所谓环形依赖,指的是模块A的所有依赖项的依赖 ...

  10. 团队项目——站立会议DAY14

    第十四次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:修改页面,查漏补缺.进行需求分析,监督每个组员,把大家的问题都一一梳理. 2.钟灵毓秀:继续修改模块代码 ...