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

本文介绍了在ASP.NET Core项目中集成UEditor的详细过程,包括遇到的500错误问题及解决方案。重点讲解了如何使用UEditor.Core Nuget包,配置上传路径,修改config.json文件,创建UEditorController接口以及调整前端调用。文章还提醒注意BasePath的设置,以避免路径错误导致的上传功能失效。
摘要由CSDN通过智能技术生成

本文只是对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富文本框就可以使用了。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值