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

一、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. 12.HTML编辑器(CKEditor、CKFinder集成)

    CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...

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

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

  4. ASP.NET版CKEditor与CKFinder的配置使用

    ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...

  5. CKEditor与CKFinder的配置

    CKEditor与CKFinder的配置使用(一) 将CKEditor 与 CKFinder 的包含在项目中 从http://cksource.com网站上下载CKEditor与CKFinder,并将 ...

  6. php环境下ckeditor和ckfinder的配置详解

    摘要:老牌编辑器FCK的升级版CKEditor(http://ckeditor.com/) 经过重写,提供了丰富而强大的集成和互动的API.新版编辑器是完全基于插件,它可以扩展所有部件以符合需求.FC ...

  7. 编辑控件CKEditor和CKFinder

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

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

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

  9. CKEditor与CKFinder整合 MVC3

    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...

随机推荐

  1. 用css2属性clip实现网页进度条

    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...

  2. Net开源网络爬虫

    转载.Net开源网络爬虫Abot介绍 .Net中也有很多很多开源的爬虫工具,abot就是其中之一.Abot是一个开源的.net爬虫,速度快,易于使用和扩展.项目的地址是https://code.goo ...

  3. 数据结构与算法之递推算法 C++与PHP实现

    数据结构是算法实现的基础,算法总是要依赖于某种数据结构来实现的.往往是在发展一种算法的时候,构建了适合于这样的算法的数据结构.一种数据结构假设脱离了算法,也就没有存在的价值了. 算法的作用----解决 ...

  4. Php设计模式(三):行为型模式part1

    原文详见:http://www.ucai.cn/blogdetail/7023?mid=1&f=5 可以在线运行查看效果哦! 在上一篇我们讲了结构型模式,结构型模式是讨论类和对象的结构的.总共 ...

  5. UITableView刷新局部

    //局部section刷新 NSIndexSet *nd = [[NSIndexSet alloc] initWithIndex:1]; //刷新第二个section [self.tableView ...

  6. jQuery 文件碎片

    经JS操作DOM节点可以是节点的单位,让我们连接节点,能够createElement,createTextNode,然后,appendChild定在一起,然后再用appendChild或insertB ...

  7. SQL编程之生日问题

    在学习MySQL的时候,一个较为经典的SQL编程题目就是生日问题,已知某个用户的出生日期和当前日期,计算他近期的生日. 一般须要考虑两个问题 闰年2月是29天 今年的生日是否过完 比如:某人的生日是1 ...

  8. Asp.Net MVC5入门学习系列⑦

    原文:Asp.Net MVC5入门学习系列⑦ 接着上篇结尾所说,如果开发中刚才遇到Model需要添加或者减少字段/属性的话,但是刚好你也利用EF的Code frist通过Model生存的数据库,这时改 ...

  9. 把VBScript的函数迁移到C#.NET

    原文:把VBScript的函数迁移到C#.NET VBScript 5.6 Functions C# code Abs System.Math.Abs Array New Object() { } A ...

  10. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...