之前照着网上的做，遇到了一些问题，经过多次实验修改最后算是成功了，下面进行详细讲解。

一、CKeditor的配置（附件中已有最新版CKeditor和CKFinder）
1.需要下载ckeditor，
可去官网：http://ckeditor.com/ 
下载后直接解压得到ckeditor文件夹，包括如下内容： 
2.其中sample为例子，source为源文件，为了减少editor的体积，直接删除。然后将整个文件夹直接拷贝到网站的根目录下.
 
3.在你需要使用editor控件的页面头部添加：
 <head>

 ...

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

 </head>
在页面相应位置上添加：

 <div>

     <%using (Html.BeginForm("Add", "Home"))

       { %>

 <p>文本域实验</p>

 <textarea id ="editor1" name="editor1" rows="" >${model.content}</textarea>

         <input type="submit" value="添加" />

 <%} %>

 </div>

 <script type="text/javascript">

 window.onload = function()

 {

 CKEDITOR.replace( 'editor1' );

 };

 </script> 
4.在后台的方法获取编辑器中的数据：

 [AcceptVerbs(HttpVerbs.Post)]

         [ValidateInput(false)]

         public ActionResult Add(FormCollection collection)

         {

             FckEditorManageDataContext db = new FckEditorManageDataContext();

             CKeditors ads = new CKeditors();

             //FckeditorModel.contents = collection["editor1"];

             var contents = collection["editor1"];

             ads.contents = contents;

             TryUpdateModel(ads);

             db.CKeditors.InsertOnSubmit(ads);

             db.SubmitChanges();

             var res = "添加成功！";

             return View(res);

         }
4.接下来就要把ckfinder集成到ckeditor中了，代码如下：
 var editor = CKEDITOR.replace('editor1');
 CKFinder.SetupCKEditor(editor, '/ckfinder/');

当然，在页面相应位置引用script代码是必不可少的。
 <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>

三、注意

如图所示：


在Telerik中显示的编辑器内容是数据库中存储的内容，但是如果我们选择这里的编辑按钮，
可以显示之前编辑器中的原版内容，所以，在做新闻热点中，如果需要获取一篇文章的前一段内容作为 摘要的话，需要在后台进行处理才能使用。

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



可是现在弄出来的是没有图片上传的，所以需要加上CKFinder





二、CKFinder配置



1.下载ckfinder，可取官网http://ckeditor.com/ 


解压后，得到一个名为ckfinder的文件夹，同样删除掉source、sample目录（原因同上），拷贝到网站根目录下。如图：







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


3.打开config.ascx，修改public override bool CheckAuthentication()


{
reture false；//改为return true；
}此处修改是为了有权限上传。






















 








												


											
CKeditor 集成 CKFinder的更多相关文章
	

    
								
  1. CKEditor 集成CKFinder集成
		
    lCKEditor原名FckEditor,著名的HTML编辑器,可以在线编辑HTML内容,演示一下.打开.自己人用CKEditor,网友用UBBEditor. l配置参考文档,主要将ckeditor中 ...
    
		
    2. 
						
  2. 12.HTML编辑器（CKEditor、CKFinder集成）
		
    CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...
    
		
    3. 
						
  3. 基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder
		
    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...
    
		
    4. 
						
  4. ASP.NET版CKEditor与CKFinder的配置使用
		
    ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...
    
		
    5. 
						
  5. CKEditor与CKFinder的配置
		
    CKEditor与CKFinder的配置使用(一) 将CKEditor 与 CKFinder 的包含在项目中 从http://cksource.com网站上下载CKEditor与CKFinder,并将 ...
    
		
    6. 
						
  6. php环境下ckeditor和ckfinder的配置详解
		
    摘要:老牌编辑器FCK的升级版CKEditor(http://ckeditor.com/) 经过重写,提供了丰富而强大的集成和互动的API.新版编辑器是完全基于插件,它可以扩展所有部件以符合需求.FC ...
    
		
    7. 
						
  7. 编辑控件CKEditor和CKFinder
		
    -使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...
    
		
    8. 
						
  8. Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)
		
    先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...
    
		
    9. 
						
  9. CKEditor与CKFinder整合 MVC3
		
    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SpringMVC4 + Spring + MyBatis3
			
    SpringMVC4 + Spring + MyBatis3 本文使用最新版本(4.1.5)的springmvc+spring+mybatis,采用最间的配置方式来进行搭建. 1. web.xml 我 ...
    
			
    2. 
						
  2. HDU多赛学校9 HDU4969 Just a Joke 【数学积分】
			
    数学题目 意甲冠军:的男孩向圆上的女孩跑去,保持男孩女孩圆心在同一条直线上.这过程中,男孩女孩均匀速 给出男孩女孩速度,圆的半径,男孩最长能跑的距离 问男孩是否能跑到女孩那里 能够用积分来解这道题,我 ...
    
			
    3. 
						
  3. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
			
    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
    
			
    4. 
						
  4. UVA11627-Slalom(二分法)
			
    题目链接 题意:有n个宽为w的旗门,第i个旗门左端的坐标为(xi, yi),对于全部1 <= i < n满足yi < y(i+1).你有s双滑雪板,第j双的速度为sj(垂直向下的速度 ...
    
			
    5. 
						
  5. MBProgressHUD -[__NSCFString sizeWithAttributes:]: unrecognized selector问题解决了
			
    最近的工作需要project打包成一个静态库文件,然后给他人使用提供. 在project有提及第三方库MBProgressHUD.在打包出静态库文件后,写了个Demo,引用了当中的一段代码来显示MBP ...
    
			
    6. 
						
  6. iOS程序 # 启动过程
			
    [ App 应用 ] 中文名:缺省 外文名:default 拼音:quē shěng 释义:系统默认状态 全称:缺省状态 -------------- 1.程序启动顺序 1> main.m程序入 ...
    
			
    7. 
						
  7. STL 源代码分析 算法 stl_algo.h -- binary_search
			
    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie binary_search -------------------------------- ...
    
			
    8. 
						
  8. IOS、java支持DES加密
			
    转载请注明博客地址:http://blog.csdn.net/mengxiangyue/article/details/40015727 近期在考虑数据加密方面的需求,所以对数据加密简单的看了一下,当 ...
    
			
    9. 
						
  9. Socket 学习（三）
			
    前2节,说的是 Server 与 Client 的数据交互.服务端IP.端口固定,客户端 网服务端发送消息的时候,他的Socket对面被服务端获取到了,而且链接没有中断,他当然可以很容易回复信息. 现 ...
    
			
    10. 
						
  10. 发现新大陆：一个最简单的破解SSL加密网络数据包的方法
			
    1. 简介 相信能访问到这篇文章的同行基本上都会用过流行的网络抓包工具WireShark,用它来抓取相应的网络数据包来进行问题分析或者其他你懂的之类的事情. 一般来说,我们用WireShark来抓取包 ...
    
			
    11.