0x00原因是最近需要一个在线编辑器。之前听说百度的UEditor不错,就去官网下载了一个。但是,服务器只有ASP.NET版本。如果想尽快使用,只需要将ASP.NET版本的服务器部署为IIS上的应用程序,即可立即使用。但是我的需求并不紧急,所以我将ASP.NET移植到了ASP.NETCore上。整个过程很简单,只是重新引用了一些包,修改了一些代码,将Controller中一个比较长的switch语句块重构为一个字典,根据url中的action参数从字典中找出并调用相应的Action处理,这样做的好处是如果想扩展action支持的操作,不需要修改源码,只需要扩展字典即可,对扩展开放,对修改关闭.***服务端功能打包为nuget包UEditorNetCore,使用方便。本篇博客主要介绍如何使用UEditorNetCore快速实现UEditor服务端。您也可以直接使用源代码中的示例。希望对有此需求的园丁有所帮助。0x01总体设计UEditorService收到一个action后,会从UEditorActionCollection中找到这个action对应的方法并调用,同时传入HttpContext参数。这些方法调用底层服务XxxxHandler完成功能,通过HttpContext.Response.WriteAsync()方法写入返回内容。如果想扩展对action的支持,可以扩展UEditorActionCollection,具体方法后面会介绍。0x02如何使用UEditorNetCore1。安装UEditorNetCoreInstall-PackageUEditorNetCore2。在Startup.cs的ConfigureServices方法中添加UEditorNetCore服务publicvoidConfigureServices(IServiceCollectionservices){//第一个参数为配置文件路径,默认为项目目录下的config.json//th第二个参数为是否缓存配置文件,默认为false services.AddUEditorService()services.AddMvc();}3.添加Controller处理来自UEditor的请求[Route("api/[controller]")]//configureroutingpublicclassUEditorController:Controller{privateUEditorServiceue;publicUEditorController(UEditorServiceue){this.ue=ue;}publicvoidDo(){ue.DoAction(HttpContext);}}4.修改前端配置文件ueditor.config.jsserverUrl需要参考步骤3配置的路由在Controller中,根据上面第3步的配置,需要配置如下:serverUrl:"/api/UEditor"这样配置后,当前端要获取服务器的时候会访问/api/UEditor?action=config-sideUEditor配置。5、修改服务器配置config.json上传类的操作需要配置相应的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个动作:config获取服务器配置信息uploadimage上传图片uploadscrawl上传涂鸦uploadvideo上传视频uploadfile上传文件listimage上传多张图片listfile上传多张文件catchimage抓图如果以上动作不能满足需求,可以轻松添加,覆盖,移除动作。添加操作publicvoidConfigureServices(IServiceCollectionservices){services.AddUEditorService().Add("test",context=>{context.Response.WriteAsync("fromtestaction");}).Add("test2",context=>{context.Response.WriteAsync("fromtest2action");});services.AddMvc();}上面的代码添加了两个名为test和test2的action,并且只返回一个字符串作为例子。当访问/api/UEditor?action=test时,它会返回“fromtestaction”。扩展action时,可以使用Config获取服务器配置,也可以使用已有的Handlers。详情请参考源码。覆盖已有的动作上面的Add方法除了可以添加新的动作外,还可以覆盖已有的动作。当现有动作可能不满足您的要求时,您可以添加同名动作来覆盖现有动作。移除动作如果你想移除一个动作,你可以使用Remove方法。publicvoidConfigureServices(IServiceCollectionservices){services.AddUEditorService().Remove("uploadvideo");services.AddMvc();}上面代码中的Remove("uploadvideo")方法删除了名为uploadvideo的动作。0x04相关资源UEditorNetCore代码及示例:https://github.com/durow/UEditorNetCoreUEditor代码:https://github.com/fex-team/ueditorUEditor官网:http://ueditor.baidu.com/website/索引.html
