需求背景

公司的管理後臺有整合的富文字編輯器，運營同學可以在後臺編輯文章釋出到我們的伺服器上，然後在客戶端微信上可以作為一些內容的點選連結或者直接訪問來顯示出編輯的效果。但是我們的編輯器排版資源不夠豐富，而且大部分運營同學都習慣秀米編輯器，在秀米編輯器上收藏了很多文章，而且秀米能夠同步文章到公眾號，且排版資源豐富。所以就考慮把秀米編輯後的文章移植到我們的編輯器裡，然後我們的編輯器只當做一個釋出的平臺就好了。

官方提供的接入方案

可以參考這兩個連結 http://r.xiumi.us/board/v5/2a5va/16516964 http://hgs.xiumi.us/uedit/ 但是發現一些問題，並不適合我們的編輯器。官方文件要求編輯器是Ueditor的核心。而且看了一下要求在頁面引入的js都是以Ueditor為基礎的，比如說UE.registerUI，雖然這段程式碼只是在Ueditor編輯器上提供開啟秀米的入口，但是由於我們的程式碼里根本沒有UE的全域性變數，所以引入會報錯。這樣的話我們就只能自己試著接入了。

自己動手接入

整個過程大概是在你的編輯器的頁面手動觸發開啟一個第三方的秀米頁面。然後在這個頁面中你可以利用秀米所有的內容進行編輯還可以登入找到你之前收藏在秀米的文章。然後編輯完成後，點選一個儲存按鈕，就把用秀米編輯的內容原封不動的放到了你的編輯器中(其實是把原始碼傳送回到的你編輯器中). 現在來看程式碼： 首先在你的編輯器頁面中引入一個iframe用來支撐第三方秀米的頁面。 <iframe id="xiumi" src="//xiumi.us/studio/v5#/paper" v-show="showXiumi"></iframe>

var xiumi = document.getElementById("xiumi");
xiumi.onload = () => {
    console.log("postMessage");
    this.loadingXiumi = false;//由於秀米載入時間比較長，應該自定義一個loading，這裡寫你的自定義loading的程式碼
    xiumi.contentWindow.postMessage("ready", xiumi_url);
};
window.addEventListener(
            "message",
            () => {
                if (event.origin == xiumi_url) {
                    editor.$txt.html(event.data);//這步是你拿到秀米的原始碼後需要手動設定到你的編輯器的原始碼中去
                    this.showXiumi = false;
                }
            },
            false
);
複製程式碼

首先來看contentWindow屬性，是指iframe所在的window物件，相容各個瀏覽器可獲得子視窗的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為傳送訊息視窗的源。拿到返回值後需要你手動設定到你的編輯器中的原始碼中(一般的編輯器都提供此api)。

點選秀米編輯顯示iframe。如圖：

遇到的問題

路徑的問題

iframe中的src秀米demo裡給的是http://xiumi.us/studio/v5#/paper，在測試環境的話同是http協議所以沒有報錯，但是我們線上是https所以存在了跨域請求的問題，所以改成"//xiumi.us/studio/v5#/paper"會去自動找協議,http就是http，https就是https了，所以就不存在跨域的問題了。

圖片的問題

用秀米編輯的文章圖片都是存在秀米伺服器上的，當我們在我們的頁面上訪問比如這張圖片http://statics.xiumi.us/stc/images/templates-assets/tpl-paper/image/6b22202e1bfb85cb8deb498cda43ec74-sz_519257.jpg的話會出現 You do not have permission to get URL '/stc/images/templates-assets/tpl-paper/image/6b22202e1bfb85cb8deb498cda43ec74-sz_519257.jpg' from this server.但是在瀏覽器直接get請求的話是可以取到的，可能是因為在我們頁面發請求的時候請求頭中帶了refer也可能是別的原因(秀米自己做了一些限制)。 解決辦法有兩個： 第一個比較麻煩就是通過把圖片上傳到自己的圖片伺服器上，然後在秀米編輯時候以連結的形式插入，但是如果文章有大量圖片的話對運營同學就比較殘忍了。 第二個辦法是，你先統計一下秀米圖片的路徑大概都有哪些，然後在你的編輯器儲存的時候，讓後端同學對拿到的內容所有秀米圖片的路徑做一次替換，替換為自己伺服器的路徑。然後你再你的頁面訪問的就是你們自己的連結，後端同學還需要用伺服器做一次轉發，當我們去請求我們的連結時，用伺服器去請求秀米的圖片然後在把請求到的圖片傳送給客戶端。這樣就不存在之前的403的問題了。

希望對有需要的同學有幫助。最後上幾張用此過程釋出的文章線上上的樣子。