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:我會經常修改 不希望被轉載！