2023年7月14日发(作者：)

在e中使⽤百度在线编辑器UEditor在 Core中使⽤百度在线编辑器UEditor0x00 起因最近需要⼀个在线编辑器，之前听⼈说过百度的UEditor不错，去官⽹下了⼀个。不过服务端只有版的，如果是为了能尽快使⽤，只要把版的服务端作为应⽤部署在IIS上就可以⽴即使⽤了。不过我的需求并不急，所以把移植到了 Core上。整个过程很简单，只是重新引⽤了⼀些包，修改了⼏处代码，另外就是把Controller中⽐较长的⼀个switch语句块重构为了字典，根据url中的action参数从字典中找出并调⽤相应的Action处理，这样的好处就是如果要扩展action⽀持的操作⽆需修改源代码，只要扩展字典就可以，对扩展开放，对修改关闭。最后把服务端功能打成了nuget包UEditorNetCore，⽅便使⽤。这篇博客主要就介绍下如何使⽤UEditorNetCore快速实现UEditor服务端，也可以直接使⽤源代码中的⽰例，希望对有这⽅⾯需求的园友有所帮助。0x01 总体设计

当接收到action后，UEditorService会从UEditorActionCollection中找到这个action对应的⽅法并调⽤，同时传⼊HttpContext参数。这些⽅法调⽤基层的服务XxxxHandler完成功能，并把返回内容通过sync()⽅法写⼊。如果要扩展对action的⽀持，可以扩展UEditorActionCollection，具体⽅法后⾯有介绍。0x02 如何使⽤UEditorNetCore1.安装UEditorNetCoreInstall-Package UEditorNetCore2.在的ConfigureServices⽅法中添加UEditorNetCore服务public void ConfigureServices(IServiceCollection services){　　//第⼀个参数为配置⽂件路径，默认为项⽬⽬录下　　//第⼆个参数为是否缓存配置⽂件，默认false　　itorService()　　();}3.添加Controller⽤于处理来⾃UEditor的请求[Route("api/[controller]")] //配置路由public class UEditorController : Controller{ private UEditorService ue; public UEditorController(UEditorService ue) { = ue; } public void Do() { on(HttpContext); }}4.修改前端配置⽂件erUrl需要参照第3步Controller中配置的路由，按照上⾯步骤3中的配置，需要以下配置：serverUrl:"/api/UEditor"这样配置后当前端要获取服务端UEditor配置时就会访问/api/UEditor?action=config。5.修改服务端配置上传类的操作需要配置相应的PathFormat和Prefix。⽰例部署在web根⽬录，因此Prefix都设置为"/"。使⽤时要根据具体情况配置。 例如⽰例中图⽚上传的配置如下："imageUrlPrefix": "/", /* 图⽚访问路径前缀 */"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",关于PathFormat的详细配置可参照官⽅⽂档。6.添加javascript引⽤0x03 扩展actionUEditor前端和后端交互主要通过在url中给出不同的action参数实现的，例如/api/UEditor?action=config会从服务端获取UEditor配置信息。UEditorNetCore⽬前⽀持的有8种action：config 获取服务端配置信息uploadimage 上传图⽚uploadscrawl 上传涂鸦uploadvideo 上传视频uploadfile 上传⽂件listimage 多图⽚上传listfile 多⽂件上传catchimage 抓取图⽚如果以上action⽆法满⾜需求，可以⽅便的增加、覆盖、移除action。增加actionpublic void ConfigureServices(IServiceCollection services){ itorService() .Add("test", context => { sync("from test action"); }) .Add("test2", context => { sync("from test2 action"); }); ();}以上代码增加了名字为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){ itorService() .Remove("uploadvideo"); ();}以上代码中的Remove("uploadvideo")⽅法移除了名为uploadvideo的action。0x04 相关资源