Use the Ckeditor4.5 editor in ASP. net mvc and mvcckeditor4.5

Use the Ckeditor4.5 editor in ASP. net mvc and mvcckeditor4.5

1. Add Ckeditor4.5.11 to the Project

(1) Create an ASP. NET mvc5project, decompress ckeditor_4.5.11_standard.zip, and copy the obtained "ckeditor" folder to the Scripts folder of the current project in Solution Explorer VS2015.

(2) In Solution Explorer, the content in the "ckeditor" folder is invisible. Select "show all files", select all contents in the folder, right-click, select "included in project" to view and use the corresponding content of the folder.

 

Ii. Use the Ckeditor editor in the View File

(1) Add reference for the editor Ckeditor. js and config. js in the view that requires the ckeditor editor.

<Script src = "~ /Scripts/ckeditor. js "> </script>

<Script src = "~ /Scripts/ckeditor/config. js "> </script>

(2) Method 1:

Set the content line

@ Html. EditorFor (model => model. PostContent, new {htmlAttributes = new {@ class = "form-control "}})

Changed to: @ Html. TextAreaFor (model => model. PostContent, new {@ class = "ckeditor "})

(3) shows the effect after running.

 

(4) Method 2: Based on step (1), add the following content at the end of the current view (This method may make the value submitted by the editor null.):

<Script type = "text/javascript">

CKEDITOR. replace ('postcontent ');

</Script>

Note: The content in the single quotation marks of CKEDITOR. replace ('postcontent') is the id value of the text box.

 

3. Add the local image upload function of the Editor

(1) Click the "image" button in the editor. The "Upload" function is not available in the image attributes.

 

(2) double-click/Scripts/ckeditor/config. js in the solution Resource Manager of the project, open the Ckeditor configuration file, and add the row config. filebrowserImageUploadUrl = "/Home/Upload ";

Note: The Controller name/method (Action) name for implementing the image upload function is displayed on the right of the equal sign. In actual development, you can use a dedicated upload controller to process the image upload function. For example: "/Upload/Image"

(3) If you want to specify a simplified Chinese language, add the following line: config. language = 'zh-cn ';

(4) refresh the page and click the image button again. The "Upload" tab is displayed. (add config in the Ckeditor configuration file. after filebrowserImageUploadUrl, the "Upload" tab is displayed for the image attributes. The effect is shown in:

 

 

Iv. Image Upload

(1) Although the "Upload" tab is displayed in step 3, there is no code for supporting the image upload function, because "/Home/Upload" has been specified in the preceding step to process image uploads, add the Upload method (action) in the Home controller. The Code is as follows:

 

[HttpPost]

Public ActionResult Upload (HttpPostedFileBase upload)

{

// Obtain the image file name

Var fileName = System. IO. Path. GetFileName (upload. FileName );

Var filePhysicalPath = Server. MapPath ("~ /Upload/"+ fileName); // you need to add the corresponding folder to the project to save it to the upload folder in the root directory of the website.

 

Upload. SaveAs (filePhysicalPath); // upload an image to a specified folder

 

Var url = "/upload/" + fileName;

Var CKEditorFuncNum = System. Web. HttpContext. Current. Request ["CKEditorFuncNum"];

 

// After the upload is successful, we also need to use the following script to return the image to the first tab option.

Return Content ("<script> window. parent. CKEDITOR. tools. callFunction ("+ CKEditorFuncNum +", \ "" + url + "\"); </script> ");

}

 

(2) because the HTML Tag code is included in the content generated by the editor, the page verification will fail when the code is submitted. It is similar to "... A potentially dangerous request is detected from the client. form value." In this case, you can add the feature (Attributes): [ValidateInput (false)] to solve this problem.

 

(3) display the content with HTML tags: @ Html. Raw (item. PostContent)