1.ueditor(vue-ueditor-wrap)集成秀米踩坑记录
链接如下:
https://www.jianshu.com/p/af5e935ea506
第一选择肯定是打开ueditor官网地址看下文档吧
image
??????
然后去github https://github.com/fex-team/ueditor,哦,已经放弃治疗了
image
先按照教 readme 试试水,下载1.5.0版本代码,结合某些古代的博客,先main.js引入这个,然后引入那个。问题来了,代码中没找到这些文件,脸更黑了。
呵,好吧,由于水平太菜,接着百度,幸运的是,找到一颗好乘凉的大树 vue-ueditor-wrap,有大佬封装了,看着大佬代码开整。
干货
安装使用 vue-ueditor-wrap
npm i vue-ueditor-wrap 或者 yarn add vue-ueditor-wrap
下载 UEditor 资源文件
我是用的这个大神的,https://github.com/HaoChuan9421/vue-ueditor-wrap-demo,直接拿到他的static下的UEditor文件夹(1.4.4.3),有dmeo可以参考可以省好多力气
当然你也可以去vue-ueditor-wrap这个大神的git中下载
下载完成以后,将UEditor文件夹放在public文件夹下(因为我是vue-cli4版本,其他版本根据情况放在static中还是public中)
引入 UEditor 资源
在main.js中依次引入
// 要按顺序
import '../public/UEditor/ueditor.config.js'
import '../public/UEditor/ueditor.all.min.js'
import '../public/UEditor/lang/zh-cn/zh-cn.js'
import '../public/UEditor/ueditor.parse.min.js'
//上面提到的 1.5.0版本找不到的就是这些文件
这里一定要 注意注意注意 路径问题
按照HaoChuan9421这个大神说,可以不引入,因为vue-ueditor-wrap做了处理,但是我用了秀米ui插件,不引入的话,插件得单独处理,我比较懒,所以我就引入了…
image
修改UEditor部分文件
ueditor.config.js中添加window.UEDITOR_HOME_URL = “/UEditor/”(文件上面注释中有提示)
third-party/zeroclipboard/ZeroClipboard中修改以下部分(解决一个报错,原因不解释了,很多博客都有说,如 https://segmentfault.com/a/1190000016966347)
image
在页面中使用编辑器
<vue-ueditor-wrap ref="editor" v-model="msg" :config="editorConfig" :destroy="true" />
import VueUeditorWrap from 'vue-ueditor-wrap'
components: {
VueUeditorWrap
},
data() {
return {
msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定 + 坑比编辑器</h2>',
// ueditor配置
editorConfig: {
autoHeightEnabled: true, // 自动变高
autoFloatEnabled: true,
initialContent: '请输入内容',
autoClearinitialContent: true,
initialFrameWidth: '50%', // 初始化宽
initialFrameHeight: 200, // 初始化高
BaseUrl: '',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口) - 修改成自己后端地址
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 资源文件的存放路径
UEDITOR_HOME_URL: '/UEditor/' // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
}
}
}
正常情况下,页面中应该可以显示编辑器了
image
当然,如果你报下面错误的话,一定要检查检查上面各步骤的路径,说到底,这个玩意,就是路径容易出问题,其他倒是没有什么
image
下面是使用秀米ui
下载秀米资源
参考秀米官网文档
下载4个资源文件,放在UEditor文件夹下
引入秀米ui文件
<link rel="stylesheet" href="./UEditor/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="./UEditor/xiumi-ue-dialog-v5.js"></script>
还是那句话,注意注意注意 路径问题
修改 xiumi-ue-dialog-v5 文件
iframeUrl: './UEditor/xiumi-ue-dialog-v5.html',
注意路径......
修改 ueditor.config.js
section:['class', 'style'],
此时,路径不出意外的话,应该是没有啥问题了
另外: 图片上传、视频上传等改成自己服务器地址,需要后台配合修改(改第5步的 serverUrl)
总结
注意路径,放平心态,对着文档和博客啥的开搞就完了
如果遇到报错或者问题看下面!!!
2.ueditor在弹出窗口被遮盖的解决办法
只需要修改代码:

链接如下:https://blog.youkuaiyun.com/weixin_36691991/article/details/89920331
3.UEditor 报错 uParse is not defined 的解决方案
解决方案思路如下:
首先发现报错位置在这里ueditor.parse.min.js?e487:7;ok先直接把该文件的引入注释掉。

然后添加
import './static/UE/themes/default/css/ueditor.css'
本文介绍了如何在Vue项目中使用vue-ueditor-wrap集成ueditor,并详细记录了集成秀米UI的过程,包括下载资源、引入配置、修改文件以及解决路径、遮盖和uParse报错等问题的步骤。同时提供了相关参考资料链接。
2965

被折叠的 条评论
为什么被折叠?



