Use Baidu online editor UEditor and Baidu online ueditor in ASP. NET Core

Use Baidu online editor UEditor and Baidu online ueditor in ASP. NET Core
Reasons for using Baidu online editor UEditor0x00 in ASP. NET Core

I recently needed an online editor. I heard people say that Baidu's UEditor is good. I went to the official website to download one. However, the server only supports ASP. NET. If you want to use it as soon as possible, you only need to deploy the ASP. NET Server as an application on IIS and then use it immediately. However, my requirements are not urgent, so I transplanted ASP. NET to ASP. NET Core. The whole process is very simple. I just re-referenced some packages and modified several pieces of code. In addition, I reconstructed a long switch statement block in the Controller into a dictionary, find the corresponding action from the dictionary according to the Action parameter in the url. The advantage is that if you want to extend the actions supported by the action, you only need to extend the dictionary without modifying the source code, it is open to extensions and closed to modifications. Finally, the server functions are converted into the nuget package UEditorNetCore for ease of use. This blog will introduce how to use UEditorNetCore to quickly implement the UEditor server. You can also directly use the examples in the source code to help you with this requirement.

0x01 Overall Design

 

After an action is received, UEditorService finds and calls the corresponding method of the action from ueditexceptioncollection, and passes in the HttpContext parameter. These methods call the basic service XxxxHandler to complete the function, and write the returned content through the HttpContext. Response. WriteAsync () method. To extend the support for action, you can extend the ueditexceptioncollection. The specific method is described later.

0x02 how to install UEditorNetCore1.

Install-Package UEditorNetCore

2. Add the UEditorNetCore service to the ConfigureServices method of Startup. cs.

public void ConfigureServices (IServiceCollection services)
{
// The first parameter is the configuration file path, and the default is config.json in the project directory
// The second parameter is whether to cache the configuration file, the default is false
Services.AddUEditorService ()
Services.AddMvc ();
}

3. Add a Controller to process requests from UEditor.

[Route ("api / [controller]")] // Configure the route
public class UEditorController: Controller
{
     private UEditorService ue;
     public UEditorController (UEditorService ue)
     {
         this.ue = ue;
     }

     public void Do ()
     {
         ue.DoAction (HttpContext);
     }
}

4. Modify the frontend configuration file ueditor. config. js

For serverUrl, refer to the route configured in Controller in step 1. Follow the configuration in step 3 above and the following configuration is required:

serverUrl:"/api/UEditor"

After this configuration, when the frontend needs to obtain the UEditor configuration of the server, it will access/api/UEditor? Action = config.

5. Modify server configuration config. json

You must configure the PathFormat and Prefix for upload operations. The example is deployed in the web root directory, so the Prefix is set "/". You must configure it according to the actual situation. For example, the configuration for uploading images is as follows:

"ImageUrlPrefix": "/",/* prefix of the image access path */"imagePathFormat ": "upload/image/{yyyy} {mm} {dd}/{time} {rand: 6 }",

For detailed configuration of PathFormat, refer to the official documentation.

6. Add javascript reference

<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

0x03 extended action

The frontend and backend interaction of UEditor is implemented by giving different action parameters in the url, such as/api/UEditor? Action = config retrieves UEditor configuration information from the server. UEditorNetCore currently supports eight types of actions:

	Config
Uploadimage upload Image
Uploadscrawl upload graffiti
Uploadvideo upload video
Uploadfile Upload File
Listimage multi-Image Upload
Listfile multi-File Upload
Catchimage capture image

If the preceding actions cannot meet your needs, you can easily add, overwrite, and remove actions.

Add action

public void ConfigureServices(IServiceCollection services)
{
    services.AddUEditorService()
        .Add("test", context =>
        {
            context.Response.WriteAsync("from test action");
        })
        .Add("test2", context => {
            context.Response.WriteAsync("from test2 action");
        });
    services.AddMvc();
}

The preceding Code adds two actions named test and test2. As an example, only strings are returned. When accessing/api/UEditor? When action = test, "from test action" is returned ". You can use Config to obtain server configurations when scaling actions, or use existing Handlers. For more information, see source code.

Overwrite existing actions

In addition to adding new actions, the Add method can overwrite existing actions. If the existing action does not meet your requirements, you can Add an action with the same name to overwrite the existing one.

Remove action

To Remove an action, you can use the Remove Method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddUEditorService()
        .Remove("uploadvideo");
    services.AddMvc();
}

The Remove ("uploadvideo") method in the above Code removes the action named uploadvideo.

0x04 related resources

UEditorNetCore code and example: https://github.com/durow/UEditorNetCore
UEditor code: https://github.com/fex-team/ueditor
UEditor Official Website: http://ueditor.baidu.com/website/index.html