Web开发上有很多HTML的编辑控件，如CKEditor、kindeditor等等，很多都做的很好,本文主要介绍在MVC界面里面，CKEditor的配置和使用。CKEditor的前身是FCKEditor，随着它的更新，上传图片的功能被分离出去了，现在如果需要实现上传图片，要么自己写代码或者采用其他上传控件（如Uploadify)，还有一种方法是使用CKFinder，这两者的合并使用，能给我们带来更多的方便。
CKEditor的使用比较简单，一般情况下根据官方的指引选择适当的样式下载就可以了，使用的时候，基本不需要怎么样修改配置文件。在MVC的视图页面里面，添加相关的引用文件就可以了。
然后在界面添加需要编辑HTML内容的textarea控件，由于我的使用的是EasyUI的控件，因此设置了控件样式class="easyui-validatebox"，也可以不管这里。
我们一般使用的时候，需要一段javascript脚本进行初始化对应的控件，初始化代码如下所示。
添加相应的脚本和控件初始化代码后，就可以在界面中呈现出需要的效果了。
而之后的控件使用，就和普通的使用没有两样了，如赋值语句如下所示。
获取控件的值，也和普通给的一样
虽然CKFinder已经独立出来，但是它也提供了完美的整合效果，我们把它下载后，在压缩包里面的bin目录里面找到相应的 ckFinder.dll，把它添加我们项目工程的引用里面去，我们才能正常使用文件上传功能。
然后修改config.ascx文件里面的一些设置，使得我们能够顺利使用。
第一步设置CheckAuthentication函数返回True。
第二步是设置SetConfig函数里面的BaseURL，这个基础地址需要设置和我们项目的地址一致，否则上传文件有问题。
第三步，整合CKFinder到CKEditor，前面说了CKEditor默认是没有文件上传的功能操作的，需要添加CKFinder并进行配置才可以使用。
这步骤需要在CKEditor里面的config.js文件里面修改下面的配置参数（红色部分就可以了）。
通过以上代码进行整合，在插入图片的操作页面里面，会增加一个浏览服务器按钮，上传操作选项卡等功能，方便对文件的浏览和上传操作，具体效果如下所示。
以上就是我在我的Web框架里面整合的HTML编辑控件和CKFinder文件上传组件，这两个组合起来，能够非常方便构建图文并茂的文章内容。
这里需要注意的是由于textarea中有特殊字符，出于安全原因，默认情况mvc框架不允许提交的，应在相应方法上加上[ValidateInput(false)]属性。
如我为了提交HTML内容，需要在控制器对象里面，重写了内容的写入和更新操作函数，如下所示。
如果对这个系列的其他内容总结有兴趣，也可以看看下面的连接：
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web开发框架形成之旅--权限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web开发框架经验总结（9）--在Datagrid里面实现外键字段的转义操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web开发框架经验总结（11）--使用Bundles处理简化页面代码</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作</a>