MVC中使用CKEditor01-基础

本篇体验在MVC中使用CKEditor,仅仅算思路、基础,暂没有把验证等与CKEditor结合在一起考虑。

 

□ 1 使用NUGET引入CKEditor
PM> Install-Package CKEditor

 

引入后在Scripts中有了CKEditor的相关文件:
MVC中使用CKEditor01-基础

 

□ 2 View Model

using System.ComponentModel.DataAnnotations;
 
namespace MvcCKEditor.Models
{
    public class Article
    {
        public int ID { get; set; }
        [Required]
        [Display(Name = "主题")]
        public string Subject { get; set; }
 
        [Required]
        [Display(Name = "内容")]
        public string Content { get; set; }
    }
}

 

□ 3 不管在哪里引用,必须引用以下有关CKEditor的js文件
<script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>

 

□ 4 HomeController

有关显示添加视图和接收添加内容:
接收添加内容时,是通过把Dictionary<string,string>,把所有错误以键值对的形式放到这个字典集合里,再使用Newtonsoft.Json把这个集合转换成json字符串,最后让前台jquery判断。但在实际做项目中,可能用ModelState在后台验证,并把需要验证的部分放在部分视图里,可能更方便一些,暂不深究。


就像在ASP.NET WebForm开发的时,如果页面没有设置ValidateInput=false,就会出现警告。在MVC中如果不设置,也会报如下错:
MVC中使用CKEditor01-基础

 

设置允许CKEditor有2种方式:
1、在控制器方法

        [ValidateInput(false)]
        public ActionResult Create(string subject, string content)

 

2、Scripts/ckeditor/config.js中做全局设置 

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = ‘fr‘;
    // config.uiColor = ‘#AADC6E‘;
 
    //也可以在这里做全局设置
    //config.htmlEncodeOutput = true;
};   

控制器与方法:

MVC中使用CKEditor01-基础展开

□ 5 Create.cshtml视图

获取CKEditor内容:

不能用var content = $(‘#content‘).val();获取CKEditor的内容。
因为TextArea的内容已经被CKEdtor替换掉了:var editor = CKEDITOR.editor.replace(‘content‘, { skin: ‘kama‘, width: ‘800px‘ });
应该使用如下方式来获取CKEditor的内容:var content = editor.getData();

MVC中使用CKEditor01-基础展开

结果:
MVC中使用CKEditor01-基础

 

参考资料:
ASP.NET MVC 3 使用CKEditor

MVC中使用CKEditor01-基础,布布扣,bubuko.com

MVC中使用CKEditor01-基础

上一篇:jqueryUI AutoCompelete


下一篇:Linux的压缩/解压缩文件处理 zip & unzip