Using Baidu online editor UEditor in ASP.NET Core

Using Baidu online editor UEditor in ASP.NET Core

0x00 Cause

I recently needed an online editor. I heard that Baidu's UEditor is good, so I went to the official website and downloaded one. However, the server only has the ASP.NET version. If you want to use it as soon as possible, you only need to deploy the ASP.NET version of the server as an application on IIS and you can use it immediately. However, my needs were not urgent, so I ported ASP.NET to ASP.NET Core. The whole process is very simple. I just re-referenced some packages and modified a few codes. In addition, I reconstructed a relatively long switch statement block in the Controller into a dictionary. According to the action parameters in the URL, I found and called the corresponding Action processing, the advantage of this is that if you want to extend the operations supported by action, you don't need to modify the source code. You only need to extend the dictionary. It is open for extension and closed for modification. Finally, the server function was packaged into the nuget package UEditorNetCore for ease of use. This blog mainly introduces how to use UEditorNetCore to quickly implement the UEditor server. You can also directly use the examples in the source code. I hope it will be helpful to gardeners who have this need.

0x01 Overall design

After receiving the action, UEditorService will find the method corresponding to the action from UEditorActionCollection and call it, while passing 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. If you want to extend support for actions, you can extend UEditorActionCollection. The specific method will be introduced later.

0x02 How to use UEditorNetCore

1. Install UEditorNetCore

Install-Package UEditorNetCore

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

public void ConfigureServices(IServiceCollection services)
{
　　//第一个参数为配置文件路径，默认为项目目录下config.json
　　//第二个参数为是否缓存配置文件，默认false
　　services.AddUEditorService()
　　services.AddMvc();
}

3. Add Controller to handle requests from UEditor

[Route("api/[controller]")] //配置路由
public class UEditorController : Controller
{
    private UEditorService ue;
    public UEditorController(UEditorService ue)
    {
        this.ue = ue;
    }

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

4. Modify the front-end configuration file ueditor.config.js

serverUrl needs to refer to the routing configured in the Controller in step 3. According to the configuration in step 3 above, the following configuration is required:

serverUrl: "/api/UEditor"

After this configuration, when the front end wants to obtain the server UEditor configuration, it will access /api/UEditor?action=config.

5. Modify the server configuration config.json

The operation of uploading classes requires configuring the corresponding PathFormat and Prefix. The examples are deployed in the web root directory, so Prefix is ​​set to "/". It should be configured according to the specific situation when using it. For example, the image upload configuration in the example is as follows:

"imageUrlPrefix": "/", /* 图片访问路径前缀 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

For detailed configuration of PathFormat, please 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

UEditor front-end and back-end interaction is mainly achieved by giving different action parameters in the URL. For example, /api/UEditor?action=config will obtain UEditor from the server Configuration information. UEditorNetCore currently supports 8 actions:

config to obtain server configuration information
uploadimage to upload pictures
uploadscrawl to upload graffiti
uploadvideo to upload videos
uploadfile to upload files
listimage to upload multiple pictures
listfile to upload multiple files
catchimage to grab pictures

如果以上action无法满足需求，可以方便的增加、覆盖、移除action。

增加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();
}

以上代码增加了名字为test和test2两个action，作为示例仅仅返回了字符串。当访问/api/UEditor?action=test时会返回"from test action"。在扩展action时可以使用Config获取服务端配置，也可以使用已有的Handlers，具体可以参考源代码。

覆盖现有action

上面的Add方法除了添加新action外还可以覆盖现有action。当现有的action可能不符合你的要求，可以Add一个同名的action覆盖现有的。

移除action

如果要移除某个action，可以使用Remove方法。

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

以上代码中的Remove("uploadvideo")方法移除了名为uploadvideo的action。