ueditor整合秀米編輯器
最近乙方提出了‘ueditor整合秀米編輯器’這個需求，官方文件寥寥幾字，真的高估了普通開發渣的智商，所以搜了一些文件，發現相關文件比較少，並且大多數文件都是根據自己的實際專案配置，或是介紹片面，但是根據點來畫線，還是成功在vue2+專案中配置了ueditor整合秀米，用小短手給自己鼓個爪（左三下，右三下，ok）。
一開始侷限於根據官方文件
在ueditor中作相關操作和配置，發現二次開發需要更改很多配置，並且中間整合秀米的時候還有全域性變數的問題，最後在摔鍵盤之前放棄了。
俗話說的好，大樹底下好乘涼，在github上某個山頭的大神做了一個基於vue的ueditor的元件，能夠實現雙向資料繫結，並且配置和使用都so easy，最後就用了這個元件，並且向大神摩拜，就是 這個元件 ofollow,noindex">vue-ueditor-wrap ，根據README.md，可以輕鬆在vue專案下配置一個ueditor編輯器
首先下載ueditor檔案包，並安裝在vue的static資料夾下，
然後 官方 下載所需檔案並放到ueditor的dialogs目錄
根據 vue-ueditor-wrap 的文件配置好ueditor編輯器
現在你元件的程式碼，大概長這樣
你配置好的編輯器大概長這樣
那我們現在結合元件的 init 屬性和 registerButton 方法，可以方便地新增自定義按鈕，來對 window.UE 進行二次開發。init 函式將在 scripts 載入完畢、UEditor 初始化之前執行
<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) => {
// 點選自定義按鈕事你需要做的事
}
})
}
}
}
</script>
在編輯器頁面中引入一個iframe用來支撐第三方秀米的頁面。 <iframe id="xiumi" src="//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() 方法可以安全地實現跨源通訊,實現頁面與巢狀的iframe訊息傳遞。postMessage(data,origin) data為要傳遞的資料，origin為目標視窗的源。
當秀米iframe載入完成後。向iframe傳送一條訊息，iframe的頁面也通過window.addEventListener('message',xxx)接收。
我們需要做和秀米頁面一樣的邏輯監聽message事件，秀米儲存時原始碼裡應該在觸發儲存事件的時候執行了
window.parent.postMessage(xxx, '*')，這樣可以拿到秀米儲存時候postMessage的值為event.data。event.origin為傳送訊息視窗的源。拿到返回值後需要你手動設定到你的編輯器中的原始碼中。
現在當我們點選自定義按鈕時候，就會彈出秀米
現在我們就可以在秀米編輯好想要頁面然後儲存在ueditor中，當然，後續的圖片上傳肯定還會遇到問題，因為暫時還沒有測試，等後續測試釋出前，會在更新上線問題，嗯，先醬。