ueditor（vue-ueditor-wrap）集成秀米踩坑记录vue-cli4

一个不断学习的前端菜鸟，欢迎指正，别喷。。。

前言

  首先， KB编辑器! ，官网都提莫的没了。然后得感谢某某某等大佬，因为确实查了好久的资料，你问我为什么不换个编辑器，？？？（手动问号），我没这个权力……，业务需要，开搞吧（项目是vue-cli4）。

试水

  第一选择肯定是打开ueditor官网地址看下文档吧

  ？？？？？？

  然后去github https://github.com/fex-team/ueditor，哦，已经放弃治疗了

  先按照教 readme 试试水，下载1.5.0版本代码，结合某些古代的博客，先main.js引入这个，然后引入那个。问题来了，代码中没找到这些文件，脸更黑了。

  呵，好吧，由于水平太菜，接着百度，幸运的是，找到一颗好乘凉的大树 vue-ueditor-wrap，有大佬封装了，看着大佬代码开整。

干货

1. 安装使用 vue-ueditor-wrap

  npm i vue-ueditor-wrap 或者 yarn add vue-ueditor-wrap

2. 下载 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中)

3. 引入 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插件，不引入的话，插件得单独处理，我比较懒，所以我就引入了…

4. 修改UEditor部分文件

  ueditor.config.js中添加window.UEDITOR_HOME_URL = "/UEditor/"(文件上面注释中有提示)

  third-party/zeroclipboard/ZeroClipboard中修改以下部分(解决一个报错，原因不解释了，很多博客都有说，如 https://segmentfault.com/a/1190000016966347)

5. 在页面中使用编辑器

  <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/' // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
      }
    }
  }

  正常情况下，页面中应该可以显示编辑器了

  当然，如果你报下面错误的话，一定要检查检查上面各步骤的路径，说到底，这个玩意，就是路径容易出问题，其他倒是没有什么

下面是使用秀米ui

6. 下载秀米资源

  参考秀米官网文档

  下载4个资源文件，放在UEditor文件夹下

7. 引入秀米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>

  还是那句话，注意注意注意 路径问题

8. 修改 xiumi-ue-dialog-v5 文件

  iframeUrl: './UEditor/xiumi-ue-dialog-v5.html'，

  注意路径……

9. 修改 ueditor.config.js

  section:['class'， 'style']，

  此时，路径不出意外的话，应该是没有啥问题了

  另外: 图片上传、视频上传等改成自己服务器地址，需要后台配合修改（改第5步的 serverUrl）

总结

  注意路径，放平心态，对着文档和博客啥的开搞就完了