关于FineUI core 使用UEditor的一些踩坑之路 一
本文只是对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的一些踩坑之路 一相关推荐
- mybatis mapper.xml dtd_全栈开发踩坑之路4-用MyBatis实现服务
1.前言 上一篇文章介绍了如何设计后端的Mysql数据库:Alex Wang:全栈开发踩坑之路3-MySql数据库设计,本文介绍如何用MyBatis实现后端服务. 本后端项目的Github地址(撰写中 ...
- jmeter 3版本到5版本踩坑之路
jmeter 3-5版本升级踩坑路 新版本下载安装 踩坑之路 新版本下载安装 下载新版本软件 ,链接: https://jmeter.apache.org/download_jmeter.cgi: 配 ...
- 微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路 需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘 思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
- contentprovider踩坑之路之Failed to find provider info for com.example.app.provider和cursor=null空指针问题
目录 bug1.Failed to find provider info for com.example.app.provider bug2:cursor=null bug1.Failed to fi ...
- 2021-11-01 富文本编辑器Vue-Quill-Editor 踩坑之路
Vue-Quill-Editor 基于 Quill.适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用. 相对于ssr,spa是通过component进行工作 ssr和spa的区别 1 踩坑之路 ...
- [Java灵信LED] -- 踩坑之路
灵信led -T8 控制板卡 --踩坑之路 下载lv_led.dll 动态库链接 https://pan.baidu.com/s/11ZO-M6kllsq2AyhVW4AKoA 提取码:unsb 提取 ...
- webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我 ...
- 基于dx11的动作游戏踩坑之路--1
基于dx11的动作游戏踩坑之路--1 首先要声明所有的博客都是学习博客,不是技术博,只是用来记录.整理自己的学习路线,以及日后可以回顾一下.本人也只是一个小菜鸡,可能会有很多错误与纰漏,有大佬愿意指出 ...
- 公司自建电商系统对接Ariba PunchOut ----踩坑之路
Ariba Network是ariba公司开发的供应商采购平台.punchout功能对接数据传输基于cxml. 主要是实现接口登录.购物车信息返回到airba系统,以及等订单功能. 开发手册中有相应的 ...
最新文章
- Linux常用开发环境软件-jdk安装
- 某百度程序员中午面试一个阿里程序员,晚上去阿里面试,面试官竟是中午那个人!
- mysql 5.7报1055错误的解决方法
- C++用顶层函数重载操作符(一)
- charles修改响应体
- php 查询cpu使用率,php获取CPU使用情况的代码
- python数字图像处理(15):霍夫线变换
- 简单的 thymeleaf 前端网页模板
- 供应链三道防线(读书笔记)4(共4)
- 从0到1教你画原型图
- python3GUI--微博图片爬取工具V1.5 By:PyQt5(附源码)
- 怎么把磁盘合并成一个?两个硬盘分区合并,如何硬盘分区合并
- 读文献——《ImageNet classification with deep convolutional neural networks》
- react redux mysql_实现React-redux的基本功能
- 大学创业是一种什么样的体验(一)
- ArcGIS模型构建器前提条件的应用(附省界县点练习数据)
- 基于element-ui 搭建管理后台
- KY59 神奇的口袋
- 游戏中常用音乐风格分析
- 霍华德大学计算机科学,霍华德大学MBA专业怎么样?
热门文章
- 经典文献阅读之--R-PCC(基于距离图像的点云压缩方法)
- GAN生成动漫头像Pytorch
- 迎接物联网时代,路由器不将就,换机潮不可阻挡
- Emoji 表情带你秒懂哈希函数
- 【网络】什么是SR-IOV、PF、VF|DPDK vs SR-IOV for NFV
- mysql 2个排序规则_MySql之排序规则问题(2)_MySQL
- EasyExcel 实现写入多个sheet数据进excel模板并下载
- kaggle简单使用教程(代码查找.下载、项目建立.运行、参加比赛)
- 最优二叉树算法java_最优二叉树II
- K2 BPM PaaS签约福耀玻璃:面向微服务应用下的BPM应用平台