The use of Baidu Ueditor Rich Text Editor in ASP. NET MVC5

As the content of the website more and more, more and more attention to aesthetics, rich text editing is indispensable, many editors compare I chose Baidu's Ueditor Rich text editor.

Baidu Ueditor Rich Text editor is divided into two kinds is the full version of the Ueditor, the other is Ueditor mini version umeditor.

First, we will talk about the full version of the Ueditor.

1, the establishment of data model.

2, establish the corresponding controller and view.

3, visit http://ueditor.baidu.com/website/download.html to enter the development version of the download page, download. NET UTF-8 version, now the latest is the 1.4.3.3 version.

4, the download after decompression, the folder renamed to Ueditor, the folder is the source program.

5. Copy this Ueditor folder to the content file of your MVC project.

6. Open the CREATE view and edit view that need to be modified, and the related operation method is exactly the same.

7, find the need to change the place, the original comments out or deleted.

Typically the view is automatically generated by the @html.editorfor (model = model. Document content, new {htmlattributes = new {@class = "Form-control"}})

It is now used directly @Html. TEXTAREAFOR (model = model. Document contents, Htmlattributes:new {@id = "Neirong"}) replaced.

8. Then find the script code at the bottom @scripts.render ("~/bundles/jqueryval")

Replace with @scripts.render ("~/bundles/jqueryval", "~/content/ueditor/ueditor.config.js", "~/content/ueditor/ Ueditor.all.js ")

9, immediately after the above code, write the following code below, here I did not do any configuration settings, because my whole station does not exist the second style, so I directly in the following Ueditor configuration file set.

<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render (' Neirong ');
</script>

The following is a parameter configuration

<script type= "Text/javascript" >
var editoroption = {
initialframewidth:784,
initialframeheight:400
};
var editor = new Baidu.editor.ui.Editor (editoroption);
Editor.render (' Neirong ');
</script>

10, now run should be able to see rich text editing effect, but this still does not, many functions are not normal need to ueditor.

11, open the Content/ueditor/ueditor.config.js.

Add window about 22 lines out.    Ueditor_home_url = "~/content/ueditor/"; It is clear from the official note that if there is no previous setup, the window must be set. The root path value of the Ueditor_home_url.

Further down is the configuration parameters, the official tip above the file has said "all the annotated configuration items are ueditor default values." ”

So according to their own needs, delete the "//" in front of the parameter, you must not delete the comma behind the.

12, Configuration Config.json. Open the Config.json file under the Content/ueditor/net folder.

Change the image access prefix for pictures, graffiti, videos, attachments, and so on to "/content/ueditor/net/". Slice access prefix "imageurlprefix": "/content/ueditor/net/", here can be used URLPrefix ":"/content/ueditor/net/replace the original URLPrefix ":"/ueditor /net/

If you do not configure the prefix path, you can upload images correctly, etc., but cannot be edited online, inaccessible. The picture is displayed as a red fork.

You can also configure other items. For example "Imagemaxsize": 2048000,/* Upload size limit, Unit B */And so on.

13. Then add the [ValidateInput (false)] property to the HttpPost method of Create and edit in the controller for the associated view. The database then saves the HTML tags to the database. If you do not join this note, the form will not be submitted correctly, and a "potential risk of Request.Form value" appears.

14, find the corresponding display position in the view of Detials operation method which is automatically created by the system, change the original @html.displayfor (model. Document contents) to @html.raw (model. Document contents), That is, the HTML tags of the content fields extracted from the data are not encoded.

This will be used normally.

Second, Ueditor mini version of Umeditor.

Mini version Umeditor latest. NET version for 1.2.2 compile time for 2016-12-22 official website I don't know why I can't just go down. I downloaded it from GitHub on the "Um demo" website. Because it is a mini-version, many steps are the same.

1, with the Ueditor 1.

2, with the Ueditor 2.

3, the download after decompression, the folder renamed to Umeditor, the folder is the source program. The file name must be this, otherwise it will be troublesome later.

4.

The use of Baidu Ueditor Rich Text Editor in ASP. NET MVC5