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:我会经常修改 不希望被转载！