最近乙方提出了‘ueditor集成秀米編輯器’這個需求盏檐，官方文檔寥寥幾字，真的高估了普通開發(fā)渣的智商屁置，所以搜了一些文檔通贞，發(fā)現(xiàn)相關(guān)文檔比較少朗若，并且大多數(shù)文檔都是根據(jù)自己的實(shí)際項目配置，或是介紹片面昌罩，但是根據(jù)點(diǎn)來畫線哭懈，還是成功在vue2+項目中配置了ueditor集成秀米，用小短手給自己鼓個爪（左三下峡迷，右三下银伟，ok）。
一開始局限于根據(jù)官方文檔
在ueditor中作相關(guān)操作和配置绘搞，發(fā)現(xiàn)二次開發(fā)需要更改很多配置彤避，并且中間集成秀米的時候還有全局變量的問題，最后在摔鍵盤之前放棄了夯辖。
俗話說的好琉预，大樹底下好乘涼，在github上某個山頭的大神做了一個基于vue的ueditor的組件蒿褂，能夠?qū)崿F(xiàn)雙向數(shù)據(jù)綁定圆米，并且配置和使用都so easy，最后就用了這個組件啄栓，并且向大神摩拜娄帖，就是 這個組件 vue-ueditor-wrap，根據(jù)README.md昙楚，可以輕松在vue項目下配置一個ueditor編輯器
首先下載ueditor文件包近速，并安裝在vue的static文件夾下，
根據(jù) vue-ueditor-wrap的文檔配置好ueditor編輯器
現(xiàn)在你組件的代碼，大概長這樣
你配置好的編輯器大概長這樣
那我們現(xiàn)在結(jié)合組件的 init 屬性和 registerButton 方法削葱，可以方便地添加自定義按鈕奖亚，來對 window.UE 進(jìn)行二次開發(fā)。init 函數(shù)將在 scripts 加載完畢析砸、UEditor 初始化之前運(yùn)行
<template>
<vue-ueditor-wrap ref="editor" v-model="msg" :init="myInit"></vue-ueditor-wrap>
</template>
<script>
export default {
methods: {
myInit () {
this.$refs.editor.registerButton({
name: 'test',
icon: '/static/xiumi-connect-icon.png',
tip: 'this is a test tip',
handler: (editor, name) => {
// 點(diǎn)擊自定義按鈕事你需要做的事
}
})
}
}
}
</script>
在編輯器頁面中引入一個iframe用來支撐第三方秀米的頁面昔字。 <iframe id="xiumi" src="http://xiumi.us/studio/v5#/paper" v-show="showIframe"></iframe>
this.editor = editorInstance
var xiumi = document.getElementById('xiumi');
var xiumi_url = 'http://xiumi.us';
xiumi.onload = function () {
xiumi.contentWindow.postMessage('ready', xiumi_url);
};
document.addEventListener('mousewheel', function (event) {
event.preventDefault();
event.stopPropagation();
});
window.addEventListener('message', function (event) {
if (event.origin === xiumi_url) {
self.editor.execCommand('insertHtml', event.data);
self.$emit('input', self.editor.getContent());
self.editor.fireEvent('catchRemoteImage');
}
}, false);
contentWindow屬性，是指iframe所在的window對象首繁，postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信,實(shí)現(xiàn)頁面與嵌套的iframe消息傳遞作郭。postMessage(data,origin) data為要傳遞的數(shù)據(jù)，origin為目標(biāo)窗口的源蛮瞄。
當(dāng)秀米iframe加載完成后所坯。向iframe發(fā)送一條消息，iframe的頁面也通過window.addEventListener('message',xxx)接收挂捅。
我們需要做和秀米頁面一樣的邏輯監(jiān)聽message事件，秀米保存時源碼里應(yīng)該在觸發(fā)保存事件的時候執(zhí)行了
window.parent.postMessage(xxx, '*')堂湖，這樣可以拿到秀米保存時候postMessage的值為event.data闲先。event.origin為發(fā)送消息窗口的源。拿到返回值后需要你手動設(shè)置到你的編輯器中的源碼中无蜂。
現(xiàn)在當(dāng)我們點(diǎn)擊自定義按鈕時候伺糠，就會彈出秀米
現(xiàn)在我們就可以在秀米編輯好想要頁面然后保存在ueditor中，當(dāng)然斥季，后續(xù)的圖片上傳肯定還會遇到問題训桶，因為暫時還沒有測試，等后續(xù)測試發(fā)布前酣倾，會在更新上線問題舵揭，嗯，先醬躁锡。
