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

最新推荐文章于 2024-09-13 22:16:11 发布

原创最新推荐文章于 2024-09-13 22:16:11 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

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'