Ueditor encounters basic usage and Problems

Ueditor encounters basic usage and Problems

I used the Kindeditor editor, but it has not been updated for a long time. The latest version is updated in 13 years. Now I want to switch to Baidu's Ueditor,

Here we will record the Ueditor's usage process and problems.

1. Download

1. Ueditor Official Website

There are three versions: 1. UBuilder: You can customize the functions you need, and then download the corresponding files.

2. Development edition: it has many features and is suitable for writing articles and formatting.

3. Mini version, basic functions, suitable for replying to comments and so on.

Download the corresponding version based on your own language, I downloaded the. Net version, UTF-8 version.

Ii. Use (the environment is MVC4,. net4.5)

Download down there are two folders, as long as the utf8-net folder, _ MACOSX is decompressed multiple out.

1. Create a Plug folder on the project, drag the utf8-net to the Plug folder, change the utf8-net folder to Ueditor

2. Create a controller: UeditorDemo => Create actione: Index => Add Index view.

3. Open the pipe network. There is a document above. You can see it when you open the document.

According to the document, we write index. cshtml

<Title> UeditorDemo </title> <! -- Configuration file --> <script src = "~ /Plug/Ueditor/ueditor. config. js "> </script> <! -- Editor source code file --> <script src = "~ /Plug/Ueditor/ueditor. all. min. js "> </script> <! -- Instantiate editor --> <script type = "text/javascript"> window. onload = function () {var ue = UE. getEditor ('Container') ;}</script> 
Then run and encountered an error.

Solution: delete all files under Ueditor-> net-> bin.
Run again and then encounter an error

 
Solution: Delete the comment in the first sentence of Ueditor-> net-> config. json (circled below ).

 
Run again to get the desired page

3. Data retrieval in the background:
The front-end display is okay, and you cannot obtain data from the background.
1. Modify the index. cshtml code and add a form so that the data can be submitted to the background.
Changed:
<Title> UeditorDemo </title> <! -- Configuration file --> <script src = "~ /Plug/Ueditor/ueditor. config. js "> </script> <! -- Editor source code file --> <script src = "~ /Plug/Ueditor/ueditor. all. min. js "> </script> <! -- Instantiate editor --> <script type = "text/javascript"> window. onload = function () {// initialFrameWidth. This parameter indicates that the width and the current window automatically change the var ue = UE. getEditor ('Container', {initialFrameWidth: null });} </script> 
2. the Controller adds an action to receive data from the front-end page. net by default, html tables cannot be transferred to the background. Therefore, you must add a feature [ValidateInput (false)] before the controller.
[ValidateInput(false)]        [HttpPost]        public ActionResult Index(FormCollection fc)        {            return Content(fc["content"]);        }
3. Run and the frontend content is output successfully.
Iv. upload files
1. directly use the upload function. Effect:

In the browser, press F12 to view the image path:

It turns out that the path is missing a Plug, and it is successfully uploaded to view the file in the project.
 
2. Modify the Image Upload path
Find the Ueditor-> net-> config. json file,
Modify "imageUrlPrefix": "/ueditor/net/" => "imageUrlPrefix": "/Plug/ueditor/net /"
Re-run the upload operation. The upload operation is successful. Try to upload multiple images again.


Later: Here is the basic usage of Ueditor. For other functions, please refer to the official website documentation and API.
Demo address: http://pan.baidu.com/s/1gebr9r9