首页 > 其他分享> > 关于FineUI core 使用UEditor的一些踩坑之路一

关于FineUI core 使用UEditor的一些踩坑之路一

2021-05-04 21:32:20 作者：互联网

本文只是对FineUI Core集成UEditor的提供一个方法，其他多多少少会有一些差别，仅供参考。

之前用mvc模式 UEditor集成倒是没啥问题，啥功能都行。就是兼容性有点...

最近做一个项目的后台，换成了Core模式，但是用富文本框的时候却发现UEditor的图片上传等没办法用了。官网也没有一个正确的例子，一研究发现UEditor没有Core的版本的，最多只是.net版的。没办法，只能通过安装一些封好的安装包实现Core来用UEditor。

首先，就是Core UEditor安装包的选择，这里我弄了比较长时间。原因很坑目前网上基本上有两种包和方法，分别是UEditorNetCore和UEditor.Core

当然这两种我都试了，第一种Nuget安装好UEditorNetCore不知道是框架的兼容性问题还是什么，反正按照正确代码配置下来，一访问UEditor一直给我报500错误。怎么调都不行，搞的我都差点放弃了。

这里着重介绍第二种，也就是UEditor.Core。

下载UEditor略过，FineUI里本身自带的NET版就可以。

第一步：当然还是用Nuget下载UEditor.Core安装。

右键点击项目>选择管理Nuget程序包>然后在未安装里查找UEditor Core>点击安装。

第二部：安装好后,引用UEditor.Core类库。并在Startup.cs中的ConfigureServices方法中加入

services.AddUEditorService();

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

第三步：将UEditor后端的config.json改名为ueditor.json并复制到项目根目录。

统一修改其访问路径前缀"/ueditor/net/"为"/"。
例：

"imageUrlPrefix": "/", /* 图片访问路径前缀 */ 

"videoUrlPrefix": "/", /* 视频访问路径前缀 */  等 所有都要改

统一修改其上传路径为upload开头

例：

"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

第四步：上面的三步做好之后，创建一个UEditorController接口并在其中加入

namespace UEditorCore.Controllers
{
    public class UEditorController : BaseController
    {
        private readonly UEditorService _ueditorService;
        public UEditorController(UEditorService ueditorService)
        {
            this._ueditorService = ueditorService;
        }

        [HttpGet, HttpPost]
        [DisableRequestSizeLimit]
        public ContentResult Upload()
        {
            var response = _ueditorService.UploadAndGetResponse(HttpContext);
            return Content(response.Result, response.ContentType);
        }
    }
}

第五步：将wwwroot/res文件夹中的ueditor剪切出来放在wwwroot目录下（不然还是会报路径有问题，我没花时间再去研究配置路径的问题），删除其中net文件夹中的所用内容。

好了，到这里后台基本上就配置好了。前台调用只需要正常使用就行了。

例：

F.HtmlEditor()
 .Label("富文本框)
 .ID("text")
 .Editor(Editor.UEditor)
 .BasePath(Url.Content("~/ueditor/"))
 .ToolbarSet(EditorToolbarSet.Full)

这里要注意BasePath的路径，因为我将ueditor放在了wwwroot目录下，并且上传路径前面没有加"/"斜杠，不要搞错了。否则还是会一直报后台路径配置错误，上传控件不能用的问题。特别烦人！！！一定注意

好了，这样我们的UEditor富文本框就可以使用了。

当然问题远没有这么简单，还有些坑下一贴再写吧。希望可以帮助头发日渐稀少的你。