.NetCore——Ueditor富文本编辑器

.NetCore——Ueditor富文本编辑器

.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);
        });
    })

希望大家在使用过程中可以积累更多的经验！