在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并且.NET Core项目很多时候是跑在Linux上面的,也没有子程序一说。
为了解决这个问题,我开发了一个.NET Core版本的后端服务,他已经在Github上开源https://github.com/baiyunchen/UEditor.Core,并提供了比较优质的中文文档供大家参考。
大家可以参考Github中的文档和源码,以下内容时从Github中Copy而来:
建议别往下看了,直接去看Github中的内容!觉得有用的,请在Github上留下你的Star
安装
建议从从nuget安装
-
方式1:可以直接在Nuget中搜索UEditor.Core并安装
方式2:通过命令行安装
Install-Package UEditor.Core
配置
并在Startup.cs中的ConfigureServices方法中,加入以下代码:
services.AddUEditorService("ueditor.json",true);
由于.Net Core默认只会从wwwroot目录加载静态文件,其他文件夹的静态文件无法正常访问。而我们希望将图片上传到网站根目录的upload文件夹下,所以需要额外在Startup.cs
类的Configure方法中,增加如下代码:
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");
}
});
然后在项目的根目录,创建upload
文件夹(这里不创建会报错)。
接下来,我们需要将ueditor后端的config.js
改名 为ueditor.json
添加到项目根目录。
这里的配置文件可以在ueditor的下载包中,net文件夹下面找到,目前版本的具体路径如下:
ueditor1_4_3_3-utf8-net\utf8-net\net\config.json
如果你懒得下载,也可以在本项目GitHub的Sample.Web下面找到ueditor.json
文件,然后粘贴到你项目的根目录下。
如果你是从UEditor的下载包中复制的该文件,需要全局将该文件中的/ueditor/net/
替换为/
创建后端接口
创建一个UEditorController,并添加如下代码:
public class UEditorController : Controller
{
private readonly UEditorService _ueditorService;
public UEditorController(UEditorService ueditorService)
{
this._ueditorService = ueditorService;
} [HttpGet, HttpPost]
public ContentResult Upload()
{
var response = _ueditorService.UploadAndGetResponse(HttpContext);
return Content(response.Result, response.ContentType);
}
}
引入ueditor并配置
从ueditor官网下载最新版本的压缩包,并放到项目的wwwroot下面的lib文件夹中,然后在你需要的使用UEditor的页面或全局引入ueditor.config.js
和ueditor.all.min.js
文件。
打开ueditor.config.js
文件,将其中的serverUrl
项改为:/ueditor/upload
。
开始使用UEditor
这部分如果遇到问题,请参考UEditor的官方文档http://fex.baidu.com/ueditor/。
在你需要使用UEditor的HTML代码中,添加如下代码:
<script id="container" name="content" type="text/plain">
欢迎使用Ueditor.Core
</script>
然后在页面的最后添加如下JS代码:
<script type="text/javascript">
var ue = UE.getEditor('container', {
initialFrameHeight: 500
});
</script>