在MVC3.0中使用ckeditor3.6

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

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

在MVC3.0中使用ckeditor3.6_第1张图片

保留的工具条:

在MVC3.0中使用ckeditor3.6_第2张图片

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

在MVC3.0中使用ckeditor3.6_第3张图片

在此需要配置一下

1.服务器路径在webConfig中:

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

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

config。aspx Code
1 public override void 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 文件,这些工作网上一大堆,文中我提到的这些工作是花了很多时间才解决的知识点!

你可能感兴趣的:(ckeditor)