在你需要使用editor控件的页面头部添加：

<head>

...

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

</head>

在页面相应位置上添加：

<textarea name="editor1"></textarea>

<script type="text/javascript">

window.onload = function() { CKEDITOR.replace( 'editor1' ); };

</script>

注意：js代码一定要写在textarea后 其实可以这样理解editor控件只是对textarea做了一个漂亮的包装，我们的输入其实都在上面的texarea中，最终也是通过textarea 提交到服务器端。

知道这些，服务器端代码就太简单了：

[AcceptVerbs(HttpVerbs.Post)]

[ValidateInput(false)]

public ActionResult Create(FormCollection collection) 

{

      blog.Content = collection["editor1"]; 。。。

}

即可取得editor中的输入。这里需要注意的是由于textarea中有特殊字符，出于 安全原因，默认情况mvc框架不允许提交的，应在相应方法上加上[ValidateInput(false)]属性。

加入CkFinder

新的editor中去除了上传功能，也就是说我们不能通过上传插入图片、flash了。如图：editor中的插入图片对话框并没有提供上传功能：

幸好有个插件ckfinder可以辅助我们完成以下功能，插件的下载地址同样在
http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1

解压后，得到一个名为ckfinder的文件夹，删除掉source、sample目录，拷贝到网站根目录下。

注意：这里还有些配置必须要做：

把文件夹中的bin目录下的dll文件添加到网站的引用中，防止出现找不到类的错误。
打开config.ascx，修改

public override bool CheckAuthentication()

    {

       reture false；//改为return true；

    }此处修改是为了有权限上传。

接下来就要把ckfinder集成到ckeditor中了，代码如下：

var editor = CKEDITOR.replace('editor1');

CKFinder.SetupCKEditor(editor, '/ckfinder/');

当然，在页面相应位置引用script代码是必不可少的。
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
好了，最后一步了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得
不爽。
去除方法如下：

找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，将其中的en.call(window,qo);    代码注释或直接删除。

至此我们的ckfinder全部配置完毕：

补充：

要自己配置eidtor的外观，可打开eidtor文件夹下的：config.js文件进行配置。

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

// config.width = 200;

};

此处配置是针对网站中所有页面的editor，如单个页面需要单独配置，直接在页面中写配置代码，示例如下：
CKEDITOR.config.height = 400;

在将CKFinder集成到CKEditor之前，我们还要对CKFinder进行一些配置。聪明的朋友应该很容易想到，既然是上传文件的插件，要配置的东西多半是上传文件的路径。

CKFinder默认的上传路径是在其本身目录下的userfiles文件夹，不过，我已经将CKFinder放到CKEditor文件夹里了，要是把图片再存放到userfiles里面，系统就得绕过三层文件夹去找文件或图片了，于是，我打算将图片上传到项目根目录下的upFile文件夹里。要实现这一功能，需要修改CKFinder下的config.ascx文件，将BaseUrl = "/ckfinder/userfiles/"修改为BaseUrl = "~/upFile/"。然后，将CKFinder/bin文件夹下的CKFinder.dll文件剪切到系统项目的bin文件夹里。或者通过添加引用的方式，将CKFinder.dll引入到项目中。接下来，我们就可以使用带有文件上传功能的CKEditor了：

把CKFinder文件夹放到CKEditor文件夹内，在页面中，引入两者的js文件：

<script src="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascript"></script>

至于将编辑器引用到控件上，网上有如下两种方法：

一是使用客户端控件textarea：

<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>

<script type="text/javascript">

var editor = CKEDITOR.replace('txtContent');

CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');

</script>

二是使用服务器端控件textbox：

个人觉得，既然是asp.net的程序，那就用服务器端的控件吧。尽管运行效率比客户端控件要慢一点，但开发效率要快一些。而且，作为程序员，我们总是喜欢是尝试所有的可能性，然后再选择自己喜欢的那一种。

其实，这里也可以不使用Text='<%# Bind("info") %>'来对控件进行赋值，直接在后置代码中使用

this.txtContent.Text=”初始值”

也是可以的。取值的时候，也可以直接使用如下代码：

CKFinder和CKEditor 的代码。当我直接运行带有编辑器的页面时，编译器提示如下错误：

string content= this.txtContent.Text

注意：TextMode="MultiLine"属性必不可少，否则取到的将是空值。

在调试程序之前，我没有精简

命名空间“System.Web.UI.Design”中不存在类型或命名空间名称“ControlDesigner”(是缺少程序集引用吗?)

出错的地方在ckeditor\ckfinder\_source\FileBrowserDesigner.cs的第19行，于是，索性把文件精简一下：

第一步，精简ckeditor ：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件；

第二步，精简ckfinder：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

这里请注意js代码的第二行：CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');，这里的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder与当前页面的相对路径，请大家不要直接复制粘贴代码，否则在上传图片时，可能会出现如下错误：

说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。

请求的URL:  /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx

我以为这样就算是做完了所有的工作了，但当我上传图片时，却又弹出了如下的提示信息：

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

没办法呀，俗话说，好事多磨。我又只能去请教最好的老师——百度了。复制上面的提示信息到百度搜索框，回车后找到了一条关于PHP整合ckeditor的帖子，对比了一下，抱着试一试的心态，居然把这样问题解决了。方法是这样的：

修改CKFinder下的config.ascx文件，将public override bool CheckAuthentication()函数的返回值由return false修改为return true。

再次测试，图片上传成功！

在ASP.NET MVC中使用CKEditor和CkFinder的更多相关文章

  1. 2.ASP.NET MVC 中使用Crystal Report水晶报表

    上一篇,介绍了怎么导出Excel文件,这篇文章介绍在ASP.NET MVC中使用水晶报表. 项目源码下载:https://github.com/caofangsheng93/CrystalReport ...

  2. 关于 ASP.NET MVC 中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...

  3. 在Asp.Net MVC 中配置 Serilog

    Serilog 是一种非常简便记录log 的处理方式,使用Serilog可以生成本地的text文件, 也可以通过 Seq 来在Web界面中查看具体的log内容. 接下来就简单的介绍一下在Asp.Net ...

  4. 如何在 ASP.NET MVC 中集成 AngularJS（3）

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  5. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  7. asp.net mvc 中 一种简单的 URL 重写

    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...

  8. 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)

    在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...

  9. ASP.NET MVC中的两个Action之间值的传递--TempData

    一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在一个叫做TempData的Property,它的类型为TempDataDictiona ...

随机推荐

  1. iOS - UIWebView

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIWebView : UIView <NSCoding, UIScrol ...

  2. Windows_cmd_命令

    1. netstat -ano  查看端口占用情况 netstat -anp // 命令来查看一下,Linux系统是否在监听 3306 这个端口号 2.

  3. linux学习笔记2-命令总结3

    文件搜索命令 1.文件搜索命令 find 2.其他文件搜索命令 grep - 在文件中搜索字串匹配的行并输出 locate - 在文件资料库中查找文件 whereis - 搜索命令所在目录及帮助文档路 ...

  4. MyBatis——调用存储过程

    原文:http://www.cnblogs.com/xdp-gacl/p/4270352.html 一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 ...

  5. [转]C++中引用（&）的用法和应用实例

    from: here 对于习惯使用C进行开发的朋友们,在看到c++中出现的&符号,可能会犯迷糊,因为在C语言中这个符号表示了取地址符,但是在C++中它却有着不同的用途,掌握C++的&符 ...

  6. 转：最小区间：k个有序的数组，找到最小区间使k个数组中每个数组至少有一个数在区间中

    转:http://www.itmian4.com/thread-6504-1-1.html 最小区间原题 k个有序的数组,找到最小的区间范围使得这k个数组中,每个数组至少有一个数字在这个区间范围内.比 ...

  7. Boostrap学习心得

    进入新公司,前端用到各种页面元素几乎都是bootStrap框架里的,下面介绍下某些页面控件怎么运用,作为知识点备份,提供有需要人观看: 首先下载bootstrap,地址http://www.bootc ...

  8. hibernate.properties和hibernate.cfg.xml

    hibernate.properties和hibernate.cfg.xml 博客分类: 框架技术 HibernateXMLSQLOracleJDBC     hibernate配置文件可以有两种方式 ...

  9. Python标准库06 子进程 (subprocess包)

    这里的内容以Linux进程基础和Linux文本流为基础.subprocess包主要功能是执行外部的命令和程序.比如说,我需要使用wget下载文件.我在Python中调用wget程序.从这个意义上来说, ...

  10. java中在linux下利用jstack检测死锁

    首先,编写一个死锁程序 package deadlock; public class testJstack { final static Object resource_1 = new Object( ...