洛阳网站优化,长沙巨浪网络科技有限公司,免费设计室内装修软件,佛山网站制作平台0x00 起因 最近需要一个在线编辑器#xff0c;之前听人说过百度的UEditor不错#xff0c;去官网下了一个。不过服务端只有ASP.NET版的#xff0c;如果是为了能尽快使用#xff0c;只要把ASP.NET版的服务端作为应用部署在IIS上就可以立即使用了。不过我的需求并不急#xf… 0x00 起因 最近需要一个在线编辑器之前听人说过百度的UEditor不错去官网下了一个。不过服务端只有ASP.NET版的如果是为了能尽快使用只要把ASP.NET版的服务端作为应用部署在IIS上就可以立即使用了。不过我的需求并不急所以把ASP.NET移植到了ASP.NET Core上。整个过程很简单只是重新引用了一些包修改了几处代码另外就是把Controller中比较长的一个switch语句块重构为了字典根据url中的action参数从字典中找出并调用相应的Action处理这样的好处就是如果要扩展action支持的操作无需修改源代码只要扩展字典就可以对扩展开放对修改关闭。最后把服务端功能打成了nuget包UEditorNetCore方便使用。这篇博客主要就介绍下如何使用UEditorNetCore快速实现UEditor服务端也可以直接使用源代码中的示例希望对有这方面需求的园友有所帮助。 0x01 总体设计 当接收到action后UEditorService会从UEditorActionCollection中找到这个action对应的方法并调用同时传入HttpContext参数。这些方法调用基层的服务XxxxHandler完成功能并把返回内容通过HttpContext.Response.WriteAsync()方法写入。如果要扩展对action的支持可以扩展UEditorActionCollection具体方法后面有介绍。 0x02 如何使用UEditorNetCore 1.安装UEditorNetCore Install-Package UEditorNetCore 2.在Startup.cs的ConfigureServices方法中添加UEditorNetCore服务 public void ConfigureServices(IServiceCollection services)
{//第一个参数为配置文件路径默认为项目目录下config.json//第二个参数为是否缓存配置文件默认false services.AddUEditorService()services.AddMvc();
} 3.添加Controller用于处理来自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.修改前端配置文件ueditor.config.js serverUrl需要参照第3步Controller中配置的路由按照上面步骤3中的配置需要以下配置 serverUrl:/api/UEditor 这样配置后当前端要获取服务端UEditor配置时就会访问/api/UEditor?actionconfig。 5.修改服务端配置config.json 上传类的操作需要配置相应的PathFormat和Prefix。示例部署在web根目录因此Prefix都设置为/。使用时要根据具体情况配置。 例如示例中图片上传的配置如下 imageUrlPrefix: /, /* 图片访问路径前缀 */imagePathFormat: upload/image/{yyyy}{mm}{dd}/{time}{rand:6}, 关于PathFormat的详细配置可参照官方文档。 6.添加javascript引用 script typetext/javascript charsetutf-8 src~/lib/ueditor/ueditor.config.js/scriptscript typetext/javascript charsetutf-8 src~/lib/ueditor/ueditor.all.min.js /scriptscript typetext/javascript charsetutf-8 src~/lib/ueditor/lang/zh-cn/zh-cn.js/script 0x03 扩展action UEditor前端和后端交互主要通过在url中给出不同的action参数实现的例如/api/UEditor?actionconfig会从服务端获取UEditor配置信息。UEditorNetCore目前支持的有8种action config 获取服务端配置信息uploadimage 上传图片uploadscrawl 上传涂鸦uploadvideo 上传视频uploadfile 上传文件listimage 多图片上传listfile 多文件上传catchimage 抓取图片 如果以上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?actiontest时会返回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。 0x04 相关资源 UEditorNetCore代码和示例https://github.com/durow/UEditorNetCoreUEditor代码https://github.com/fex-team/ueditor UEditor官网http://ueditor.baidu.com/website/index.html 原文地址http://www.cnblogs.com/durow/p/6116393.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
