Use CKEditor01-basics in MVC

This article describes how to use CKEditor in MVC. It is just about the concept and basis, and does not consider the combination of verification and CKEditor.

 

□1 use NUGET to introduce CKEditor
PM> Install-Package CKEditor

 

After introduction, CKEditor files are available in Scripts:

 

□2 View Model

using System.ComponentModel.DataAnnotations;

namespace MvcCKEditor.Models

{

    public class Article

    {

        public int ID { get; set; }

        [Required]

[Display (Name = "topic")]

        public string Subject { get; set; }

        [Required]

[Display (Name = "content")]

        public string Content { get; set; }

    }

}

 

□3 no matter where the file is referenced, the following js files related to CKEditor must be referenced:
<Script src = "@ Url. Content ("~ /Scripts/ckeditor. js ")" type = "text/javascript"> </script>

 

□4 HomeController

To add a view and receive the added content:
When receiving the added content, it puts all errors in the form of key-value pairs in the Dictionary set by putting Dictionary <string, string>, and then uses Newtonsoft. json converts the set to a json string, and then let jquery judge the result at the front end. However, in actual projects, ModelState may be used for background verification, and the part to be verified may be placed in some views, which is more convenient for the moment.

As in ASP. NET WebForm development, if ValidateInput = false is not set on the page, a warning is displayed. If this parameter is not set in MVC, the following error is reported:

 

CKEditor can be set in two ways:
1. In the Controller Method

        [ValidateInput(false)]

        public ActionResult Create(string subject, string content)

 

2. perform global settings in Scripts/ckeditor/config. js.

CKEDITOR.editorConfig = function( config )

{

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

// You can also set global settings here

    //config.htmlEncodeOutput = true;

};   

Controller and method:

Expand System. web. mvc; mvmediaeditor. models; Newtonsoft. json; mvmediaeditor. controllers {HomeController: Controller {List <Article> articles =; HomeController () {articles = List <Article> {Article () {ID = 1, Subject = "", content = ""}, Article () {ID = 2, Subject = "", Content = "" }};} ActionResult Index () {View (articles );} actionResult Create () {View ();} [HttpPost] [ValidateInput ()] ActionResult Create (subject, content) {Dictionary <,> jo = Dictionary <,> (); (. isNullOrEmpty (subject) {jo. add ("", ""); Content (JsonConvert. serializeObject (jo ),"");}(. isNullOrEmpty (content) {jo. add ("", ""); Content (JsonConvert. serializeObject (jo), "") ;}{ Article article = Article (); article. subject = subject; article. content = content; articles. add (article); jo. add ("", "") ;}( Exception ex) {jo. add ("", ""); jo. add ("", ex. message);} Content (JsonConvert. serializeObject (jo ),"");}}}

□5 Create. cshtml View

Get CKEditor content:

You cannot use var content = $ ('# content'). val (); To obtain CKEditor content.
Because the content of TextArea has been replaced by CKEdtor: var editor = CKEDITOR. editor. replace ('content', {skin: 'Kama ', width: '800px '});
Use the following method to obtain the content of CKEditor: var content = editor. getData ();

Expand "; Layout =" ";}< h2> Create 


Result:

 
References:
※Asp. net mvc 3 uses CKEditor