关于 Nuxt 集成ueditor的一些坑(包括图片上传)前端部分
最近公司接了一个项目,里面用到富文本编辑器,刚开始用的是vue-quill-editor,这个编辑器轻量、好用。最重要的是它有专门正对nuxt的版本,很容易配置,可以放心使用,不用担心bug之类的,遇到问题,在网上也能搜到相应的解决方法。
但是了,我们项目经理就嫌弃这编辑器太轻量了,说能不能换百度的?(到时内心mmp),给他说了一堆理由(百度的编辑器就稍微丰富了一些,图片上传这些功能vue-quill-editor也有啊、ueditor没有专门正对nuxt这种ssr版本的、往nuxt里面引导会出现一系列bug等)然并卵,说让我弄吧,当时有点绝望,本来我也不是大神,只是个小菜鸟,而且当时手上还有其他任务怕没时间做(要知道配置这种东西,很费时间),没办法,最后只能自己百度然后各种采坑了。
写这篇文章主要是给那些需要的人,文章中如有错误,感谢大家勇于指正,好了,废话不多说,来看一下我这个小白遇到的问题:
1.关于如何将ueditor里面的相关js文件引用到nuxt项目里? 参考网站:nuxt官网文档 (https://zh.nuxtjs.org/)
首先,先去百度富文本编辑器官网(http://ueditor.baidu.com/website/)去下载ueditor 1.4.3.3 jsp 版本utf-8 然后把下下来的文件自己新建文件夹放进去(除了jsp文件夹)
我的目录结构
(我把除了jsp的文件夹以外的所有文件放到了新建文件夹Ueditor里面,然后再把Ueditor文件夹放到nuxt的static下面,至于为何放到static里,请去看nuxt的官方文档)
然后给大家说一下nuxt引入外部js、css等文件的地方,nuxt不要向一般的vue那样在main.js里面引入外部js,nuxt引入外部文件在nuxt.config.js里面
上图·有几处要说一下,首先是static文件夹在nuxt里面的相对路径,千万不要写/static/xx,去看官方文档,直接就是/,那时候没看官网直接自己去找路径、结果就是404,其次上面的js引入顺序,按照这个顺序写吧,不然会加载出差或者加载不完全,基本这俩点搞定就ok了。 2.关于ueitor封装成组件统一调用及ueditor.config.js(前端主要配置文件)配置的问题
关于封装成组件的形式,请大家看这篇博客 (https://www.cnblogs.com/ocean-sky/p/7132319.html),里面讲的很详细,博主里面github都放了相关的代码,封装组件就按这个来没错,如果你的ueditor里面文件各种报错的话可以去拷贝一份下来(楼楼的上传图片一直不显示按钮,就烤了一份ueditor.all.js文件下来就ok了)
关于ueditor.config.js的配置,贴几张图片大家看一下
3.说一下上传图片的问题
首先我们配好ueditor后,正常情况下上传图片啊、视频这些是坏的,因为需要后端配置(参考上面那篇博客里面的后端配置),后端配置好了后,会给你返回地址也就是我们上图那个服务器统一请求接口路径
注意:这个点击上传图片的按钮只有下面图中接口返回正确才会出现,否则就是提示后端配置项没有加载完成巴拉巴拉这类的
这个接口必须调用成功返回相关的配置项。
然后,就是上传问题了,我不是说我之前考了一份ueditor.all.js文件吗?在这个里面单图上传的文件被改过,就是下图的地方
他用jquery的ajax请求的主要为了解决跨域的问题,大家都指导vue这类的框架,最好就不要扯上jquery了,so,当时就报错了,后来自己下面就重新写的请求
也就换了请求方法,你自己也可以用其他的方式。
最后提一下,图片上传接口返回的一个错误
点击上传他会请求接口发送这俩个参数(不要担心参数、这都是ueditor弄好的),而有一种错误是我遇到的,那就是接口返回state是解析上传表单失败?啊哈,这是后端没有解析好你发的东西,我的后端小伙伴说是给他传的upfile是null,一脸懵逼,后来才查到是他那边springboot还是什么的跟什么冲突了巴啦啦的(就他解析你参数的那个方法让他查一下为什么是null就百度出来了),总之你如果也碰到这个问题,可以让你的后端小伙伴上网上查一下, 解决了就好了。
最后想说一定要看相关的文档,然后多去思考,刚开始感觉难,但是一步一步走过来,和身边的小伙伴配合就ok了.
关于 Nuxt 集成ueditor的一些坑(包括图片上传)前端部分相关推荐
- Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
- 富文本编辑器Ueditor实战(二)-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
- ueditor上传图片写入数据库_ueditor图片上传,以及图片路径保存进数据库
前段时间一直忙于各种事,今天有点空也不是很困,就来写写文章吧,写的东西如题 那么我就按顺序进行说明一下吧 先废话一句吧,什么ueditor? UEditor是由百度web前端研发部开发所见即所得富文本 ...
- PHP+CKEditor 3配置详细说明(包括图片上传)
首先,我们要在页面中加入CKEditor的js文件: <head> ... <script type="text/javascript&qu ...
- Ueditor编辑器图片上传
Ueditor编辑器图片上传 UEditor的图片上传采用了Flash上传的方式,在功能上支持批量.本地预览和实时进度提示,在界面上支持自定义背景.上传按钮和预览框等视觉元素的样式属性,基本能够满足各 ...
- Spring Boot集成Ueditor富文本编辑器,实现图片上传,视频上传,返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法 还是老样子 需求 ...
- 百度富文本Ueditor图片上传趟坑之路
之所以写这片文章是自己在使用Ueditor当中,自己遇到的一些问题整理一下 1. 项目说明:使用Ueditor的项目是一个后台管理的项目,采用maven搭建的ssh框架另外添加了redis等组件,当中 ...
- vue3开发1:在vue3项目中集成ckeditor5编辑器,自定义图片上传,图片编辑排坑(一)
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
- 百度编辑器(ueditor)踩坑,图片转存无法使用
原文链接:百度编辑器(ueditor)踩坑,图片转存无法使用 补充 2023-02-03:很多人反馈找不到文中提到的 xss 配置,由于 UE 官网已不再维护,大部分地址都是重定向到 GitHub 仓 ...
最新文章
- android onCreate的两个方法
- php nl2br() 函数
- PHP去除换行符的方法小结(PHP_EOL变量的使用)
- LogoSharp:Logo语言的C#实现
- Java 开发环境部署
- maven自带clean_maven之clean、install命令
- 使用Mfuzz包进行基因表达的时间趋势分析并划分聚类群
- 8.3 折特惠票仅剩 5 天!「2019 嵌入式智能国际大会」全日程大公开!
- mysql rds 定时执行_RDS下执行SQL小脚本
- html5 成语连连看,全国通用五年级下册语文讲义-阅读与作文:学写读后感(含答案)[参考].pdf...
- [转]FTP搜索引擎的设计与实现
- hisi spi nand flash驱动理解
- 中国第一家区块链形式化验证公司获种子轮投资
- 免费的ppt模板百度网盘资源
- 公众号文章怎么制作?
- JavaScript String 对象参考手册 italics() 方法
- Geoserver基础配图研究
- Ogre2.0 全新功能打造新3D引擎
- spket1.6.23安装 spket破解
- JavaScript中常见键盘事件以及BOM中window常用对象
热门文章
- 初学JavaWeb需要的前端js,JavaScript是什么样的?
- usb转ttl模块与matlab,USB接口转TTL小板的自检测试
- DCL并非单例模式专用
- centos-安装python3.6环境并配置虚拟环境
- 或许你不知道的10条SQL技巧(转自58沈剑原创)
- (原创)SpringBoot入门
- 【转】android:DDMS查看Threads--不错
- 【转】代码里的命名规则:错误的和正确的对比
- 怎样去掉警告 log4j:WARN No appenders could be found for logger
- 阿里巴巴的开源项目Druid(关于数据库连接)