一、起因

UEditor是百度旗下的富文本编辑器,对于后端上传处理仅提供了Asp.Net 版的支持。

如果想在.Net Core项目中使用,那么后台上传接口需要重构。

UEditorNetCore:百度在线编辑器UEditor在ASP.NET Core下的服务端扩展库,使用简单,易于扩展。

如果是Asp.Net Core 2.0项目请使用如下命令:

Install-Package UEditorForNetCore2

二、使用步骤

1.安装UEditorForNetCore2,将js插件添加到项目中

2.在Startup.cs中注册服务

public void ConfigureServices(IServiceCollection services)
{
//第一个参数为配置文件路径,默认为项目目录下config.json
//第二个参数为是否缓存配置文件,默认false
services.AddUEditorService("wwwroot/lib/ueditor1_4_3_3-utf8-net/net/config.json");
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}",

6.添加js引用,实例化富文本编辑器

<script src="~/lib/ueditor1_4_3_3-utf8-net/ueditor.config.js"></script>
<script src="~/lib/ueditor1_4_3_3-utf8-net/ueditor.all.js"></script>
<script src="~/lib/ueditor1_4_3_3-utf8-net/lang/zh-cn/zh-cn.js"></script> <script>
var ue = UE.getEditor('container');
</script>

三、总体设计

当接收到action后,UEditorService会从UEditorActionCollection中找到这个action对应的方法并调用,同时传入HttpContext参数。这些方法调用基层的服务XxxxHandler完成功能,并把返回内容通过HttpContext.Response.WriteAsync()方法写入。如果要扩展对action的支持,可以扩展UEditorActionCollection,具体方法后面有介绍。

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。

更多:

Asp.Net Core WebAPI入门整理(四)参数获取

.NetCore中EFCore for MySql整理(三)之Pomelo.EntityFrameworkCore.MySql

Asp.Net Core获取请求信息/获取请求地址

在ASP.NET Core2.0中使用百度在线编辑器UEditor(转)的更多相关文章

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

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  2. [转]在ASP.NET Core中使用百度在线编辑器UEditor

    原文地址:https://www.cnblogs.com/durow/p/6116393.html 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服 ...

  3. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  4. 【翻译】asp.net core2.0中的token认证

    原文地址:https://developer.okta.com/blog/2018/03/23/token-authentication-aspnetcore-complete-guide token ...

  5. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程

    UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...

  6. asp.net core2.0中异常的处理

    最近在开发中遇到一些关于如何抛出异常的困惑,在qq群里进行了讨论,有些人认为抛出异常是有理由的,可以对业务流程进行控制,而有些认为抛出异常会导致程序性能低下,我写一些自己的心得吧. 异常的全局处理 a ...

  7. asp.net core2.0中网站发布的时候,怎么样才配置才可以使视图文件不被打包进去?

    默认设置可真是坑~~ https://q.cnblogs.com/q/99680/

  8. asp.net core2.0中网站发布的时候,视图文件不被打包成dll

    项目csproj文件里面加 <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <Target ...

  9. ASP.NET MVC 5 中 使用富文本编辑器 Ueditor

    一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...

随机推荐

  1. ANN算法总结

    kd-tree kd-tree works poorly in high dimensions (k<30) 自己实验的时候差不多20到30左右吧,超过之后,就真的很慢了 faiss suppo ...

  2. 浏览器的userAgent归纳

    IE IE6 User-Agent:Mozilla/4.0 (Windows; MSIE 6.0; Windows NT 5.2) IE7 User-Agent:Mozilla/4.0 (compat ...

  3. graphql详解

    随着系统业务量的增大不同的应用和系统共同使用着许多的服务api,而随着业务的变化和发展,不同的应用对相同资源的不同使用方法最终会导致需要维护的服务api数量呈现爆炸式的增长,比如我试着跑了下我们自己业 ...

  4. python 全栈开发,Day106(结算中心(详细),立即支付)

    昨日内容回顾 1. 为什么要开发路飞学城? 提供在线教育的学成率: 特色: 学,看视频,单独录制增加趣味性. 练,练习题 改,改学生代码 管,管理 测,阶段考核 线下:8次留级考试 2. 组织架构 - ...

  5. python 全栈开发,Day68(Django的路由控制)

    昨日内容回顾 1 MVC和MTV MTV 路由控制层(分发哪一个路径由哪一个视图函数处理) V : views (逻辑处理) T : templates (存放html文件) M : model (与 ...

  6. MVC开发中的常见错误-03-System.Data.Entity.Validation.DbEntityValidationException: 对一个或多个实体的验证失败。有关详细信息,请参见“EntityValidationErrors”属性。

    return Db.SaveChanges()>0; return CurrentDBSession.SaveChanges(); RoleInfoService.EditEntity(role ...

  7. for循环输出数组中的分数

    示例 var scores = [24, 32, 17]; // A数组 var arrayLength = scores.length;// 数组的长度 //当i<arrayLength时,可 ...

  8. 简易图书管理系统(主要是jsp的练习)

    1:首先设计用户表和图书表,设计的字段和类型如下图所示 1.1:用户表user 1.2:图书表book 2:第二写实体类user.java和book.java package com.bie.po; ...

  9. 基于OSGI.NET的MVC插件式开发

    最近在研究OSGI.NET插件式开发框架.官方网站提供了一个基于OSGI.NET的插件仓库.下载官方的SDK包安装后VS项目模板会多出一组iOpenWorks项目模板.在学习过程中,发现通过iOpen ...

  10. BZOJ5120 [2017国家集训队测试]无限之环 费用流

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ5120 题意概括 原题挺简略的. 题解 本题好难. 听了任轩笛大佬<国家队神犇>的讲课才 ...