ASP.net core 使用UEditor.Core 实现 ueditor 上传功能
首先通过nuget 引用UEditor.Core，作者github：
在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中添加引用
******
然后在页面的最后添加如下JS代码：
如果使用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:我会经常修改 不希望被转载！