我們的項目中使用的是ueditor+秀米的富文本編輯器稚铣，github上的大神做了一個基于vue的ueditor的組件，能夠?qū)崿F(xiàn)雙向數(shù)據(jù)綁定拇舀，可以不用費勁的getContent陕悬、setContent暮蹂。就決定用這個組件 —— vue-ueditor-wrap 。so~ vue+vue-ueditor-wrap+秀米. 開始吧 ???
一：去ueditor官網(wǎng)下載官方源碼
下載完成后澎现，放到你的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">
<!--數(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插件示例
- 在你的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杀赢，如果不是的話要按你自己的路徑烘跺。
到這里就是可以正常使用秀米并且有著雙向數(shù)據(jù)綁定的ueditor啦。
圖片上傳相關(guān)功能需要后臺小哥哥的協(xié)助脂崔。
其余與秀米的對接可以參考與秀米對接
還是有疑問的小盆友可以下載我上傳的demo滤淳，希望可以幫助到你??
