.NetCore——Ueditor富文本编辑器
一、准备工作
下载Ueditor1.4.3.Asp(UTF-8)版本点击此处前往
下载完成后解压到文件夹,打开ASP文件夹中的config文件进行修改
为了方便区分将config的名字改成Ueditor
这个时候将此文件放到项目中,将ASP这个文件夹删除
修改完成后放入项目中 如图所示
二、配置项目
将刚才解压的文件夹放入到wwwroot/lib下,此处我是将它改了文件夹名字后放入的
下面打开NuGet安装插件Ueditor.Core
然后在Startup件里注入Ueditor
services.AddUEditorService();
在这个Startup的Configure方法里设置Uedtior
箭头所指的地方是可以自定义存储路径
创建一个UEditorController控制器进行方法实现
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);
}
public IActionResult Index()
{
return View();
}
此处的构造注入也可以放在其他的控制器里面,我的项目中是放在通用Controller里面的
下一步
将ueditor.config.js文件中的请求路径改成你接口的地址,根据你的实际实现方法地址改
这个时候还需要修改文件的存储路径 在开始将config名字改为Ueditor.js的文件中,因为我把存储路径存到wwwroot下的upload文件夹中的,所以我在原来路径前加了"wwwroot/",这里也是根据你实际设置的路径改的,这个文件中所有的存储路径最好都改一下。不要只涉及到图片就只改图片的路径
到这的话就算是已经配置完成了
剩下的就是我们页面上实现了
三、实现
按照顺序引用下面的js文件,顺序不对会报错的
HTML:
这样就可以实现了
完美展示!
四、结尾
Ueditor会出现渲染失败的问题,当你第一次加载页面的时候可以渲染成功,往后加载的时候就会渲染失败,所以为了解决这个问题
我们需要在js中这样写
$(function () {
UE.delEditor('container');
var ue = UE.getEditor('container', {});
ue.ready(function () {
ue.setHeight(600);
});
})
希望大家在使用过程中可以积累更多的经验!