关于FineUI core 使用UEditor的一些踩坑之路 一
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于FineUI core 使用UEditor的一些踩坑之路 一,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3176字,纯文字阅读大概需要5分钟。
内容图文
![关于FineUI core 使用UEditor的一些踩坑之路 一](/upload/InfoBanner/zyjiaocheng/991/b526959cd3eb4a9a8752160d43fa7066.jpg)
本文只是对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富文本框就可以使用了。
当然问题远没有这么简单,还有些坑下一贴再写吧。希望可以帮助头发日渐稀少的你。
内容总结
以上是互联网集市为您收集整理的关于FineUI core 使用UEditor的一些踩坑之路 一全部内容,希望文章能够帮你解决关于FineUI core 使用UEditor的一些踩坑之路 一所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。