ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题

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.csdn.net/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'

ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题相关推荐

vue使用vue-ueditor-wrap集成秀米
vue通过UEditor集成秀米接入Ueditor vue-ueditor-wrap 接入秀米接入Ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量, ...
vue-cli 使用ueditor集成秀米富文本
前言要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本一.准备工作进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
ueditor 集成秀米背景图片不显示的问题
百度的富文本集成秀米的时候遇到一个大坑,就是远程抓取图片本地化抓取不到背景图片.原因是秀米的背景用的是<section>,而不是<img>,百度抓取不到.查了很多资料也没 ...
Neditor集成秀米
首先去秀米官网下载需要的四个文件,这里做的下载用户体验非常坏死,只有一个HTML文件可以直接下载,剩下的需要访问只能在浏览器中打开,而且还有乱码,那么这里涉及到一个浏览器转码首先用火狐浏览器访问文件 ...
秀米编辑器（xiumi）+百度编辑器（Ueditor）集成：解决集成问题，秀米编辑器导出到百度编辑器格式问题，图片保存到自己的服务器（阿里云OSS）
1.集成前提条件: 1. 需要集成百度编辑器到环境中 2.https环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误然后我们开始讲解如何集成: 2.引入资源: //百度编辑器需要 ...
php从富文本中抓出图片url,富文本编辑器抓取秀米图片转存到七牛云
制作图文排版秀米是一个不错的平台,而百度的UEditor编辑器可以集成秀米的插件,两者结合使文章的排版变得更加的快捷方便. UEditor集成秀米教程 http://hgs.xiumi.us/uedi ...
neditor+秀米上传图片处理
上篇所说Neditor集成秀米操作,结尾抛出一个问题,那就是图片是秀米服务器访问的地址,而且没有办法再引入时访问自己项目的服务保存图片,那么应该从保存上开始处理,获取content内容,循环内容中的所 ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
Vue+UEditor+秀米
一.下载Ueditor相关静态文件存放位置去Ueditor官网下载相关资源(本文下载的1.4.3.3版本): 下载之后,把资源放到 /static/ueditor/ 目录下.文档结构如下: ![在这 ...

ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题

ueditor（vue-ueditor-wrap）集成秀米全过程以及遇到的问题相关推荐

最新文章

热门文章