vue+vue-ueditor-wrap+秀米

我们的项目中使用的是ueditor+秀米的富文本编辑器，github上的大神做了一个基于vue的ueditor的组件，能够实现双向数据绑定，可以不用费劲的getContent、setContent。就决定用这个组件 —— vue-ueditor-wrap 。so~ vue+vue-ueditor-wrap+秀米. 开始吧 ?⤵︎

一：去ueditor官网下载官方源码

https://ueditor.baidu.com/website/download.html
下载完成后，放到你的Vue项目里static下并命名为UEditor。

二：安装vue-ueditor-wrap

npm i vue-ueditor-wrap

三：引入并使用

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ueditor的依赖文件
import '../static/UEditor/ueditor.config'
import '../static/UEditor/ueditor.all.min.js'
import '../static/UEditor/lang/zh-cn/zh-cn.js'
import '../static/UEditor/ueditor.parse.min.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

组件里

<template>
  <div class="hello">
    <!--数据绑定-->
    <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
    <div>{{msg}}</div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap' // 引入vue-ueditor-wrap
export default {
  name: 'HelloWorld',
  components: {
    VueUeditorWrap  //注册组件
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>

</style>

这些完成后，你就可以看到一个初始化ok的ueditor了，并且可以很方便的绑定想要的数据 ?
接入秀米的童鞋继续向下看?

四：在ueditor基础上接入秀米

秀米提供：秀米图文排版UEditor插件示例

在你的index.html中引用 http://xiumi.us/connect/ue/xiumi-ue-dialog-v5.js 和 http://xiumi.us/connect/ue/xiumi-ue-v5.css 也可以下载文件后放在UEditor目录下引入本地文件，这样方便修改。（我是下载后引入本地的）如下

<link rel="stylesheet" href="static/UEditor/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="static/UEditor/xiumi-ue-dialog-v5.js"></script>

下载文件 http://xiumi.us/connect/ue/xiumi-ue-dialog-v5.html 和 http://hgs.xiumi.us/uedit/dialogs/internal.js 放在你的UEditor目录下。
修改UEditor的配置（ueditor.config.js），第414行左右：将section:[] 改为section:['class', 'style']，避免ueditor修改秀米的格式信息，造成排版错误。
在xiumi-ue-dialog-v5.js中把iframeUrl改为本地秀米H5的路径，如果你都是按照以上步骤进行那么路径将是/static/UEditor/xiumi-ue-dialog-v5.html，如果不是的话要按你自己的路径。

到这里就是可以正常使用秀米并且有着双向数据绑定的ueditor啦。
图片上传相关功能需要后台小哥哥的协助。
其余与秀米的对接可以参考与秀米对接
还是有疑问的小盆友可以下载我上传的demo，希望可以帮助到你😜