我們的項目中使用的是ueditor+秀米的富文本編輯器，github上的大神做了一個基于vue的ueditor的組件，能夠?qū)崿F(xiàn)雙向數(shù)據(jù)綁定，可以不用費勁的getContent、setContent。就決定用這個組件 —— vue-ueditor-wrap 。so~ vue+vue-ueditor-wrap+秀米. 開始吧 ???

一：去ueditor官網(wǎng)下載官方源碼

1. https://ueditor.baidu.com/website/download.html

2. 下載完成后，放到你的Vue項目里static下并命名為UEditor。

二：安裝vue-ueditor-wrap

npm i vue-ueditor-wrap

三：引入并使用

1. 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/>'
})

2. 組件里

<template>
  <div class="hello">
    <!--數(shù)據(jù)綁定-->
    <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了，并且可以很方便的綁定想要的數(shù)據(jù) ?
接入秀米的童鞋繼續(xù)向下看?

四：在ueditor基礎(chǔ)上接入秀米

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

1. 在你的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>

2. 下載文件 http://xiumi.us/connect/ue/xiumi-ue-dialog-v5.html 和 http://hgs.xiumi.us/uedit/dialogs/internal.js 放在你的UEditor目錄下。

3. 修改UEditor的配置（ueditor.config.js），第414行左右：將section:[] 改為section:['class', 'style']，避免ueditor修改秀米的格式信息，造成排版錯誤。

4. 在xiumi-ue-dialog-v5.js中把iframeUrl改為本地秀米H5的路徑，如果你都是按照以上步驟進行那么路徑將是/static/UEditor/xiumi-ue-dialog-v5.html，如果不是的話要按你自己的路徑。

到這里就是可以正常使用秀米并且有著雙向數(shù)據(jù)綁定的ueditor啦。
圖片上傳相關(guān)功能需要后臺小哥哥的協(xié)助。
其余與秀米的對接可以參考與秀米對接
還是有疑問的小盆友可以下載我上傳的demo，希望可以幫助到你??