Using the Baidu Online Editor in ASP. Ueditor

Using the Baidu Online Editor in ASP. Ueditor

0x00 causes

Recently need an online editor, before heard people said Baidu Ueditor good, to the official website under a. However, only the service side only ASP, if it is to be used as soon as possible, as long as the ASP. NET version of the server as an application deployed on IIS can be used immediately. But my needs are not urgent, so I ported ASP. The whole process is very simple, just to re-reference some of the packages, modify a few of the code, the other is the controller of a long switch statement block refactoring in order to dictionary, according to the URL of the action parameter from the dictionary to find and invoke the corresponding action processing, The advantage of this is that if you want to extend the action support operation without modifying the source code, as long as the extension dictionary can be open to the extension, the modification is closed. Finally, the service-side function became NuGet package Ueditornetcore, easy to use. This blog is mainly about how to use Ueditornetcore to quickly implement the Ueditor server, you can also directly use the source code examples, I hope to have this need to help the park friends.

0x01 Overall Design

When the action is received, Ueditorservice will find the action corresponding method from the ueditoractioncollection and call it, and pass in the HttpContext parameter. These methods call the base service Xxxxhandler to complete the function and write the return content through the HttpContext.Response.WriteAsync () method. If you want to extend support for an action, you can extend Ueditoractioncollection, which is described later in this article.

0x02 How to use Ueditornetcore

1. Installing Ueditornetcore

Install-package Ueditornetcore

2. Add the Ueditornetcore service to the Configureservices method in Startup.cs

public void Configureservices (iservicecollection services) {//The first parameter is the profile path, the default is the project directory under Config.json//The second parameter is whether the configuration file is cached, False services by default. Addueditorservice () services. Addmvc ();}

3. Adding a controller to process requests from ueditor

[Route ("Api/[controller]")]//Configure Routing 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 route configured in the 3rd step controller, as configured in step 3 above, the following configuration is required:

ServerURL: "/api/ueditor"

This is configured to access/api/ueditor?action=config when the front end is getting the server-side ueditor configuration.

5. Modify the server-side configuration Config.json

The operation of the upload class needs to be configured with the appropriate Pathformat and prefix. The sample is deployed at the Web root, so the prefix is set to "/". Use the configuration according to the specific situation. For example, the image upload configuration is as follows:

"Imageurlprefix": "/",/* Image access Path prefix */"Imagepathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

Detailed configuration of the Pathformat can be referred to the official documentation.

6. Add a 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 interactions are implemented primarily by giving different action parameters in the URL, such as/api/ueditor?action=config getting ueditor configuration information from the server. Ueditornetcore currently supports 8 types of action:

Config to get server-side configuration information
Uploadimage Uploading Images
Uploadscrawl Uploading Graffiti
Uploadvideo Uploading Videos
UploadFile Uploading Files
ListImage Multi-image upload
ListFile multiple file uploads
Catchimage crawling Pictures

If the action above does not meet your needs, you can easily add, overwrite, and remove the action.

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 above code adds the name test and test2 two action, as an example just returns the string. The From test action is returned when/api/ueditor?action=test is accessed. You can use config to get the server-side configuration when you extend the action, or you can use the existing handlers to refer to the source code.

Overwrite existing action

The Add method above can also overwrite an existing action in addition to adding a new action. When an existing action may not meet your requirements, you can add an action with the same name to overwrite the existing one.

Remove action

If you want 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.

