在ASP.NET Core中使用百度在线编辑器UEditor

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  

原文地址:http://www.cnblogs.com/durow/p/6116393.html


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用TypeScript开发微信小程序

微信小程序来了&#xff01;这个号称干掉传统app的玩意儿虽然目前处于内测阶段&#xff0c;不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了。 工具和文档可以参考官方文档&#xff1a;https://mp.weixin.qq.com/debug/wxadoc/dev/?t1477926804193 Type…

八幅漫画理解使用JSON Web Token设计单点登录系统

上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。我尝试用八幅漫画先让大家理解如何设计正常的用户认证系统&#xff0c;然后再延伸到单点登录系统。 如果还没有阅读《JSON Web Token - 在Web应用间安全地传递信息》&…

pg和oracle比较,Oracle与PostgreSQL使用差异对比与总结

JDBC连接&#xff1a;Oracle的jdbc连接字符串&#xff1a;db.urljdbc:oracle:thin:192.168.1.1:1521:ORCLPostgresql的连接字符串&#xff1a;db.urljdbc:postgresql:192.168.1.1:5432/database1、基本数据类型差异OraclePostgreSQLVarchar2varcharnumbernumericdatetimestamp/…

hibernate+struts2整合jar包冲突

前几天&#xff0c;在用HibernateStruts2做项目的时候遇到了一个很棘手的问题&#xff0c;jar包冲突&#xff01;&#xff01;&#xff01;先亮一下错误&#xff1a; 之前还不知道这是个啥错误&#xff0c;经过上网查找之后才知道这是jar包冲突的问题&#xff01;&#xff01;由…

在ASP.NET Core中实现一个Token base的身份认证

以前在web端的身份认证都是基于Cookie | Session的身份认证, 在没有更多的终端出现之前&#xff0c;这样做也没有什么问题&#xff0c;但在Web API时代&#xff0c;你所需要面对的就不止是浏览器了&#xff0c;还有各种客户端&#xff0c;这样就有了一个问题&#xff0c;这些客…

php 运算器,运算器的功能是什么

运算器的功能是加、减、乘、除四则运算&#xff0c;与、或、非、异或等逻辑操作&#xff0c;以及移位、比较和传送等操作&#xff0c;运算器的处理对象是数据&#xff0c;所以数据长度和计算机数据表明方法&#xff0c;对运算器的性能影响极大。本文操作环境&#xff1a;Window…

.NET Standard 2.0:整齐划一的目标

在两个月前公布.NET Standard 2.0时&#xff0c;微软认为新版标准的目标在于为现有的三个主要.NET平台&#xff1a;.NET Framework、.NET Core&#xff0c;以及Xamarin提供一个坚实的底层基础&#xff0c;并为未来满足树莓派或IoT等全新类型设备需求可能需要创建的分支提供支持…

两年来的core折腾之路几点总结,附上nginx启用http2拿来即用的配置

为什么要迁移&#xff0c;江湖上传说windows server的稳定性不如某某某&#xff0c;这类议题与八卦新闻没两样&#xff0c;不谈&#xff0c;如果windows的价钱能够和linux相同或者差异不至于那么大&#xff0c;我才懒得换&#xff0c;因为穷&#xff0c;这才是重点。 涉及IO路径…

Vue(笔记)

所有东西必须都在标签里面进行定义&#xff0c;都在div中 报错后不断npm和cnpm Vue简介 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架&#xff0c;发布于2014年2月。与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关…

java通过poi读取excel中的日期类型数据或自定义类型日期

java通过poi读取excel中的日期类型数据或自定义类型日期 Java 读取Excel表格日期类型数据的时候&#xff0c;读出来的是这样的 12-十月-2019&#xff0c;而Excel中输入的是 2019/10/12 或 2019-10-12 poi处理excel时&#xff0c;当excel没有明确指明是哪个类型的数据时&…

微软的FreeBSD社区推广活动 北京站,你没看错!微软现在是一家名副其实的开源公司

自2012年开始&#xff0c;微软云计算与企业事业部和Citrix思杰&#xff0c;NetApp达成合作&#xff0c;共同开发出第一版针对Hyper-V虚拟设备驱动以及相关的用户态程序&#xff0c;并将此称之为集成服务 (Integration Service) 。微软也紧密地和FreeBSD社区合作&#xff0c;所有…

别羡慕别人的舒服,静下心来坚持奋斗!!!

通常给家里打电话的时候是晚上23点之后&#xff0c;因为家里也知道我这边忙&#xff0c;我也知道家里23点之前也在忙&#xff0c;所以选择在23点之后和家里联系联系&#xff0c;聊聊家常。自从到济南3年之久&#xff0c;即使在忙也每隔3-5天就给家里通一次电话&#xff0c;每次…

Linux ss命令 报错,ECS Linux中ss命令显示连接状态的使用说明

1. ss命令可用来获取socket统计信息&#xff0c;这个命令输出的结果类似于netstat输出的内容&#xff0c;但是它能够显示更多更详细的TCP连接状态的信息&#xff0c;且比netstat更快更高效。ss命令能够从内核空间直接得到信息&#xff0c;netstat命令读取各种/proc 文件收集信息…

Asp.Net Core 通过中间件防止图片盗链

一、原理 要实现防盗链&#xff0c;我们就必须先理解盗链的实现原理&#xff0c;提到防盗链的实现原理就不得不从HTTP协议说起&#xff0c;在HTTP协议中&#xff0c;有一个表头字段叫referer&#xff0c;采用URL的格式来表示从哪儿链接到当前的网页或文件。换句话说&#xff0c…

linux软件可以在所有发行版运行吗,Linux通用的跨发行版的3大软件包管理器

前言本文主要介绍Linux系统上通用的跨发行版的3大软件包管理器。Linux系统上的软件包管理可能非常令人困惑&#xff0c;尤其是对于新手&#xff0c;因为不同的Linux发行版使用不同的包管理系统。在大多数情况下&#xff0c;最令人困惑的部分是软件包依赖项的解析和管理。例如&a…

Java IO: 管道

转载自 Java IO: 管道 译文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197gmail.com) Java IO中的管道为运行在同一个JVM中的两个线程提供了通信的能力。所以管道也可以作为数据源以及目标媒介。 你不能利用管道与不同的JVM中的线程通信(不同的进程)。在概念上&#xf…

一款全新的基于IntelliJ和ReSharper的跨平台.NET IDE

JetBrains Rider在今年一月份露面&#xff0c;后来的大部分时间被用在了内部早期预览版上&#xff0c;还没有为公开发布做好准备。而现在&#xff0c;我们可以下载早期预览版&#xff0c;并感受在IntelliJ平台上开发.NET是一种什么体验。早期预览版还存在一些问题&#xff0c;不…

mysql自动插入的时间不对 差8小时

MySQL插入时间差八小时问题的解决方法 更新时间&#xff1a;2019年12月15日 10:19:12 转载 作者&#xff1a;lankeren 这篇文章主要给大家介绍了关于MySQL插入时间差八小时问题的解决方法&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家学习或者使用MySQL具…