ASP.net core 使用UEditor.Core 实现 ueditor 上传功能
ASP.net core 使用UEditor.Core 实现 ueditor 上传功能
首先通过nuget 引用UEditor.Core，作者github：https://github.com/baiyunchen/UEditor.Core/
在Startup.cs中添加
services.AddUEditorService(); 引入ueditor并配置
从ueditor官网下载最新版本的压缩包，并放到项目的wwwroot下面的lib文件夹中，然后在你需要的使用UEditor的页面或全局引入ueditor.config.js和ueditor.all.min.js文件。
打开ueditor.config.js文件，将其中的serverUrl项改为UEditorController中Upload方法对应的地址(没有改路由的话应该是：UEditor/Upload)。
配置静态资源文件夹
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "upload")),
RequestPath = "/upload",
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");
}
});
解决中文被html编码的问题
//解决中文被html编码的问题
services.Configure(options =>
{
options.TextEncoderSettings = new TextEncoderSettings(UnicodeRanges.BasicLatin, UnicodeRanges.CjkUnifiedIdeographs);
});
添加后端配置文件
将下载ueditor .net 中config.js 改名 为ueditor.json添加到项目根目录。
ueditor.json
/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "/", /* 图片访问路径前缀 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 涂鸦图片上传配置项 */
"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
"scrawlFieldName": "upfile", /* 提交的图片表单名称 */
"scrawlPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
"scrawlUrlPrefix": "/", /* 图片访问路径前缀 */
"scrawlInsertAlign": "none",
/* 截图工具上传 */
"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix": "/", /* 图片访问路径前缀 */
"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
/* 抓取远程图片配置 */
"catcherLocalDomain": [ "127.0.0.1", "localhost", "img.baidu.com" ],
"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName": "source", /* 提交的图片列表表单名称 */
"catcherPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "/", /* 图片访问路径前缀 */
"catcherMaxSize": 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 抓取图片格式显示 */
/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "upfile", /* 提交的视频表单名称 */
"videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "/", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles": [
".flv",
".swf",
".mkv",
".avi",
".rm",
".rmvb",
".mpeg",
".mpg",
".ogg",
".ogv",
".mov",
".wmv",
".mp4",
".webm",
".mp3",
".wav",
".mid"
], /* 上传视频格式显示 */
/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "upfile", /* 提交的文件表单名称 */
"filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "/", /* 文件访问路径前缀 */
"fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
"fileAllowFiles": [
".png",
".jpg",
".jpeg",
".gif",
".bmp",
".flv",
".swf",
".mkv",
".avi",
".rm",
".rmvb",
".mpeg",
".mpg",
".ogg",
".ogv",
".mov",
".wmv",
".mp4",
".webm",
".mp3",
".wav",
".mid",
".rar",
".zip",
".tar",
".gz",
".7z",
".bz2",
".cab",
".iso",
".doc",
".docx",
".xls",
".xlsx",
".ppt",
".pptx",
".pdf",
".txt",
".md",
".xml"
], /* 上传文件格式显示 */
/* 列出指定目录下的图片 */
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
"imageManagerListPath": "upload/image", /* 指定要列出图片的目录 */
"imageManagerListSize": 20, /* 每次列出文件数量 */
"imageManagerUrlPrefix": "/", /* 图片访问路径前缀 */
"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
"imageManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 列出的文件类型 */
/* 列出指定目录下的文件 */
"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
"fileManagerListPath": "upload/file", /* 指定要列出文件的目录 */
"fileManagerUrlPrefix": "/", /* 文件访问路径前缀 */
"fileManagerListSize": 20, /* 每次列出文件数量 */
"fileManagerAllowFiles": [
".png",
".jpg",
".jpeg",
".gif",
".bmp",
".flv",
".swf",
".mkv",
".avi",
".rm",
".rmvb",
".mpeg",
".mpg",
".ogg",
".ogv",
".mov",
".wmv",
".mp4",
".webm",
".mp3",
".wav",
".mid",
".rar",
".zip",
".tar",
".gz",
".7z",
".bz2",
".cab",
".iso",
".doc",
".docx",
".xls",
".xlsx",
".ppt",
".pptx",
".pdf",
".txt",
".md",
".xml"
] /* 列出的文件类型 */
}
如果想上传到根目录特定文件夹，只需要修改
"upload/file" / "upload/image/"类似字段即可开始使用UEditor
创建后端接口
例如：
public class UEditorController : Controller
{
private readonly UEditorService _ueditorService;
public UEditorController(UEditorService ueditorService)
{
this._ueditorService = ueditorService;
}
//如果是API，可以按MVC的方式特别指定一下API的URI
[HttpGet, HttpPost]
public ContentResult Upload()
{
var response = _ueditorService.UploadAndGetResponse(HttpContext);
return Content(response.Result, response.ContentType);
}
}
如果想指定区域如下
using UEditor.Core;
namespace Website.MVC.Areas.Admin.Controllers
{
[Area("Admin")]
[Authorize]
[IgnoreAntiforgeryToken]
[Route("{area}/{controller}")]
public class UploadController : Controller
{
private readonly UEditorService _uEditorService;
public UploadController(UEditorService uEditorService)
{
_uEditorService = uEditorService;
}
[Route("UEditor")]
[AllowAnonymous]
[HttpGet, HttpPost]
public ContentResult UEditor()
{
var response = _uEditorService.UploadAndGetResponse(HttpContext);
return Content(response.Result, response.ContentType);
}
}
}
wwwroot/lib/ueditor-1.4.3.3/ueditor.config.js中需要设置controller
// 服务器统一请求接口路径
//, serverUrl: "/ueditor/upload"
, serverUrl: "/Admin/Upload/UEditor"
在需要的.cshtml中添加引用
***
<!--form 表单ID name 仍然可以使用-->
<div class="layui-form-item">
<script id="Content" name="Content" type="text/plain" style="width:1366px;height:500px;">
</script>
</div>
***
<!-- 配置文件 -->
<script src="~/lib/ueditor-1.4.3.3/ueditor.config.js" asp-append-version="true"></script>
<!-- 编辑器源码文件 -->
<script src="~/lib/ueditor-1.4.3.3/ueditor.all.min.js" asp-append-version="true"></script>
<!--建议手动加载语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js">
然后在页面的最后添加如下JS代码：
<script type="text/javascript">
var ue = UE.getEditor('container', {
initialFrameHeight: 500
});
</script>
如果使用layui 如下：
//layer 弹窗索引
var layerindex;
var ueditContentIndex;
layui.use(['layer', 'table', 'upload', 'laydate', 'form'], function () {
var table = layui.table,
layer = layui.layer,
form = layui.form,
laydate = layui.laydate,
upload = layui.upload;
var useUEditor = function () {
//建立编辑器
ueditContentIndex = UE.getEditor('ArticleContent', {
initialFrameHeight: 500
});
****
if (ueditContentIndex != null) {
ueditContentIndex.destroy();
}
useUEditor(); //实例化编辑器,只能放在layer 弹窗后
// editor准备好之后才可以使用
ueditContentIndex.addListener("ready", function () {
//赋值
ueditContentIndex.setContent(""); //你想要的值
});
}
****
ajax:
$.ajax({
type: 'post',
url: "/Admin/Article/SubmitArticle",//请求的action路径
data: {
****
ArticleContent: formdata.Content, //UEditor name 直接用layui formdata 省事
*****
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
layer.msg('提交失败！', { icon: 2 });
}
});
});
最后修复UEditor 会“吃掉” 'class', 'style' 的bug.
在 /wwwroot/lib/ueditor-1.4.3.3/ueditor.config.js 第366行
设置所有便签都加上['class', 'style'],（有xss风险慎用）
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
,whitList: {
a: ['target', 'href', 'title', 'class', 'style'],
abbr: ['title', 'class', 'style'],
address: ['class', 'style'],
area: ['shape', 'coords', 'href', 'alt'],
article: ['class', 'style'],
aside: ['class', 'style'],
audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
b: ['class', 'style'],
bdi: ['dir'],
bdo: ['dir'],
big: ['class', 'style'],
blockquote: ['cite', 'class', 'style'],
br: ['class', 'style'],
caption: ['class', 'style'],
center: ['class', 'style'],
cite: ['class', 'style'],
code: ['class', 'style'],
col: ['align', 'valign', 'span', 'width', 'class', 'style'],
colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
dd: ['class', 'style'],
del: ['datetime'],
details: ['open'],
div: ['class', 'style'],
dl: ['class', 'style'],
dt: ['class', 'style'],
em: ['class', 'style'],
font: ['color', 'size', 'face'],
footer: ['class', 'style'],
h1: ['class', 'style'],
h2: ['class', 'style'],
h3: ['class', 'style'],
h4: ['class', 'style'],
h5: ['class', 'style'],
h6: ['class', 'style'],
header: ['class', 'style'],
hr: ['class', 'style'],
i: ['class', 'style'],
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style'],
ins: ['datetime'],
li: ['class', 'style'],
mark: ['class', 'style'],
nav: ['class', 'style'],
ol: ['class', 'style'],
p: ['class', 'style'],
pre: ['class', 'style'],
s: ['class', 'style'],
section: ['class', 'style'],
small: ['class', 'style'],
span: ['class', 'style'],
sub: ['class', 'style'],
sup: ['class', 'style'],
strong: ['class', 'style'],
table: ['width', 'border', 'align', 'valign', 'class', 'style'],
tbody: ['align', 'valign', 'class', 'style'],
td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
tfoot: ['align', 'valign', 'class', 'style'],
th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
thead: ['align', 'valign', 'class', 'style'],
tr: ['rowspan', 'align', 'valign', 'class', 'style'],
tt: ['class', 'style'],
u: ['class', 'style'],
ul: ['class', 'style'],
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']
}
};
UEditor.Core作者github地址： https://github.com/baiyunchen/UEditor.Core
pass:我会经常修改 不希望被转载！
ASP.net core 使用UEditor.Core 实现 ueditor 上传功能的更多相关文章
- ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件，并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- 百度开源富文本编辑器 UEditor配置：图片上传和文件上传独立使用方法
使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...
- ueditor编辑器多图上传为什么顺序打乱了
我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题. 我的网站在用户上传图片文章的时 ...
- UEditor调用上传图片、上传文件等模块
来源:https://www.cnblogs.com/lhm166/articles/6079973.html 说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞.我们在网站 ...
- UMEditor(Ueditor mini)修改图片上传路径
UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网 ...
- ueditor单独调用图片上传
很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享: 效果如下: 页面效 ...
- .NET和.NET Core Web APi FormData多文件上传对比
前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
随机推荐
- mysql学习2
1.视图 视图是一个虚拟表(非真实存在),其本质是[根据sql语句获取动态的数据集,并为其命名],用户使用时只需要使用[名称]即可获取结果集,并可以将其当作表来使用. 搜索临时表 SELECT * F ...
- 异步使用委托delegate --- BeginInvoke和EndInvoke方法
当我们定义一个委托的时候,一般语言运行时会自动帮委托定义BeginInvoke 和 EndInvoke两个方法,这两个方法的作用是可以异步调用委托. 方法BeginInvoke有两个参数: Async ...
- Java_异常处理
这篇我们聊聊java中的异常.首先我们要知道什么是异常? Exception: exception翻译过来就是“意外”的意思.事实上,异常的本质就是程序的错误,包括程序逻辑错误和系统错误.错误在编写程 ...
- vue 值的更新
用了vue开发了一段时间,基本上感觉都是比较好用的一个框架,刚开始还是会存在一些小坑的东西,这里先浅谈下值的更新问题. 1.本组件的一些变量,或者是主view(路由页面)一些值,是通过vuex 中st ...
- 把一下程序中的print()函数改写成
源代码: #include <iostream> using namespace std; void print( int w ) { ; i <= w ; i++ ) { ; j ...
- 为什么导入本地jquery.js老是无效？（已解决）
我从jquery官网里复制过来jquery.js内容,然后粘贴到本地,但是引用的时候总是无效. 在翻看脚本所在目录,无意间发现脚本文件是个jquery.js.js, 原来是我的文件的扩展名的问题 ...
- js-day02-BOM和DOM
BOM和Document对象常见属性和方法: BOM是browser object model的缩写,简称浏览器对象模型. Document 对象每个载入浏览器的 HTML 文档都会成为 Docume ...
- CSS文字的跑马灯特效
上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心! 今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春! 道具:会敲代码的巧手.七窍玲珑心.会 ...
- Mesos源码分析(12): Mesos-Slave接收到RunTask消息
在前文Mesos源码分析(8): Mesos-Slave的初始化中,Mesos-Slave接收到RunTaskMessage消息,会调用Slave::runTask. void Slave::ru ...
- 算法与数据结构(六) 迪杰斯特拉算法的最短路径(Swift版)
上篇博客我们详细的介绍了两种经典的最小生成树的算法,本篇博客我们就来详细的讲一下最短路径的经典算法----迪杰斯特拉算法.首先我们先聊一下什么是最短路径,这个还是比较好理解的.比如我要从北京到济南,而 ...