後臺第三方編輯器接入秀米編輯器總體流程

需求背景

公司的管理後臺有集成的富文本編輯器，運營同窗能夠在後臺編輯文章發佈到咱們的服務器上，而後在客戶端微信上能夠做爲一些內容的點擊連接或者直接訪問來顯示出編輯的效果。可是咱們的編輯器排版資源不夠豐富，並且大部分運營同窗都習慣秀米編輯器，在秀米編輯器上收藏了不少文章，並且秀米可以同步文章到公衆號，且排版資源豐富。因此就考慮把秀米編輯後的文章移植到咱們的編輯器裏，而後咱們的編輯器只當作一個發佈的平臺就行了。

官方提供的接入方案

能夠參考這兩個連接 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的問題了。

但願對有須要的同窗有幫助。最後上幾張用此過程發佈的文章在線上的樣子。