[转]在ASP.NET Core中使用百度在线编辑器UEditor
原文地址:https://www.cnblogs.com/durow/p/6116393.html
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?action=config。
5.修改服务端配置config.json
上传类的操作需要配置相应的PathFormat和Prefix。示例部署在web根目录,因此Prefix都设置为"/"。使用时要根据具体情况配置。 例如示例中图片上传的配置如下:
"imageUrlPrefix": "/", /* 图片访问路径前缀 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
关于PathFormat的详细配置可参照官方文档。
6.添加javascript引用
<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 扩展action
UEditor前端和后端交互主要通过在url中给出不同的action参数实现的,例如/api/UEditor?action=config会从服务端获取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?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。
0x04 相关资源
UEditorNetCore代码和示例:https://github.com/durow/UEditorNetCore
UEditor代码:https://github.com/fex-team/ueditor
UEditor官网:http://ueditor.baidu.com/website/index.html
[转]在ASP.NET Core中使用百度在线编辑器UEditor的更多相关文章
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 在ASP.NET Core2.0中使用百度在线编辑器UEditor(转)
一.起因 UEditor是百度旗下的富文本编辑器,对于后端上传处理仅提供了Asp.Net 版的支持. 如果想在.Net Core项目中使用,那么后台上传接口需要重构. UEditorNetCore:百 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程
UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...
- Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)
目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...
- ASP.NET Core中使用IOC三部曲(一.使用ASP.NET Core自带的IOC容器)
前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.. emm..不懂的可以自行百度. 目录 ...
- ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)
前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.. emm..不懂的可以自行百度. 目录 ...
- ASP.NET Core中使用IOC三部曲(三.采用替换后的Autofac来实现AOP拦截)
前言 本文主要是详解一下在ASP.NET Core中,采用替换后的Autofac来实现AOP拦截 觉得有帮助的朋友~可以左上角点个关注,右下角点个推荐 这里就不详细的赘述IOC是什么 以及DI是什么了 ...
- 在 ASP.NET Core 中集成 Skywalking APM
前言 大家好,今天给大家介绍一下如何在 ASP.NET Core 项目中集成 Skywalking,Skywalking 是 Apache 基金会下面的一个开源 APM 项目,有些同学可能会 APM ...
随机推荐
- pseudo-class与pseudo-element的不同点与相同点
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- cocos Studio使用问题
使用的时候最好是同一套资源饭在一个文件夹下,或者新建的文件和资源类,一个资源分一个产生的层文件
- 移动端弹出层加遮罩后禁止body滑动
//实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){ document.body.sty ...
- Beta冲刺 4
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10123035.html 作业博客:https://edu.cnblogs.com/campus ...
- javap反汇编的使用
javap可以查看class文件信息,灵活的运用javap,让你更好的理解class类文件结构信息等 方法/步骤 javap -help查看命令帮助 javap -package Te ...
- django学习系列——python和php对比
python 和 php 我都是使用过,这里不想做一个非常理性的分析,只是根据自己的经验谈一下感想. 在web开发方面,无疑 php 更甚一筹. 从某种角度来说,php 就是专门为 web 定制的语言 ...
- 使用VMware 虚拟linux系统环境
操作步骤说明: https://jingyan.baidu.com/album/f71d603782e70e1ab641d1da.html?picindex=1 vmware 克隆多个系统: http ...
- CentOS7的网卡重启方法
1.centos6的网卡重启方法:service network restartcentos7的网卡重启方法:systemctl restart network 2.DNS配置文件:cat /etc/ ...
- 面向对象text 01 盖伦vs瑞文vs提莫
''' Text For Class: League of Legends Garen vs Riven vs Teemo ''' import random # 全局随机 import time c ...
- 不使用Visual Studio开发ASP.NET MVC应用(上篇)
入行十多年,工作闲暇,还是对信息技术比较关注,经常测试一些新的技术,感受一下科技发展给大家带来的便利.Visual Studio接触也有年头了,对它总感觉乎近乎远的,既熟悉又陌生,一直没有像用别的工具 ...