在MVC3.0中使用Ckeditor【鸡蛋】

来源:互联网 发布:淘宝微淘怎么玩 编辑:程序博客网 时间:2024/05/01 08:52

原文出自:http://www.cnblogs.com/lei2007/archive/2011/06/24/2089255.html



在MVC3.0中使用Ckeditor,要注意的几点:

  第一:工具条太多了,有些没有必要使用,可以在根目录下config.js 文件自定义所需的工具条,官方下载的ckeditor里面很多没有的文件夹,可删除,我只有保留可用文件。

保留的工具条:

第二,使用上传图片 、Flash、超链接 时需要在官网下载ckfinder, 放在ckeditor文件夹之下,如图一:

在此需要配置一下

1.服务器路径在webConfig中:

 <!--ckeditor 上传文件的路径-->
        <add key="CK_BaseUrl" value="http://192.168.0.194/Files/Base/ckfinder/" />

2.在ckfinder 中config.aspx中配置好路径 红色一行

config。aspx Code
复制代码
1 publicoverridevoid SetConfig()
2 {
3 // Paste your license name and key here. If left blank, CKFinder will
4 // be fully functional, in Demo Mode.
5   LicenseName="";
6 LicenseKey="";
7
8 // The base URL used to reach files in CKFinder through the browser.
9 //BaseUrl = "/ckfinder/userfiles/";
10 BaseUrl = ConfigurationManager.AppSettings["CK_BaseUrl"].ToString();
复制代码

 

第三:在Controller 中我们需要在 提交view 的action中 加上关于验证的东西

[ValidateInput(false)]//目的是为了防止在提交时报“检测到有潜在危险的客户端输入值”
        public ActionResult AddSaveNotice(NOTICE notice)
        {
            this.ValidateRequest = false;

        }

第四:在view层,我们需要从TextAreaFor中获取文本传给ckeditor

View Code
复制代码
1 @Html.TextAreaFor(model=> model.CONTENT)
2
3 <script language="javascript" type="text/javascript">
4
5 //CKEDITOR.replace('CONTENT');//将textarea值传给编辑器
6 var editor= CKEDITOR.replace('CONTENT');
7 CKFinder.setupCKEditor(editor,'http://www.cnblogs.com/Content/ckeditor/ckfinder');
8
9 function FormSubmit()
10 {
11 $("#CONTENT").val(CKEDITOR.instances.CONTENT.getData());//CKEDITOR.replace 的参数值
12 $("#frmNotice").submit();
13
14 }
15
16 </script>
复制代码

 

当整个form表单提交的时候ajax 触发

@using (Ajax.BeginForm("AddSaveNotice", null, new AjaxOptions() { UpdateTargetId = "divOutpClass" }, new { id = "frmNotice" }))
 {

}

如果提交是需要清空ckeditor值,即:

CKEDITOR.instances.CONTENT.setData("")

如果想要获得纯文本,即:CKEDITOR.instances.content.document.getBody().getText()

在Castle-MonoRai 框架中有时候 需要先htmlEncode 编码一下:

CKEDITOR.tools.htmlEncode(CKEDITOR.instances.content.document.getBody().getText())

如果想要插入资料的话(图片、文本等)var str=""; CKEDITOR.instances.content.insertHtml(str);

最后需要指出的还有 一些准备工作需要做,比如 验证 设为true,引用dll 文件,这些工作网上一大堆,文中我提到的这些工作是花了很多时间才解决的知识点!