一文教你在quill編輯器中集成秀米編輯器和135編輯器-有解無憂

1：問題&需求

大家知道，quill會自動過濾掉秀米和135編輯器文章里面的section之類的樣式，導致復制進去的文章排版根本不能看，秀米官網宣告只支持ueditor內核的編輯器內核，如果專案里用的編輯器不是ueditor內核的，而客戶一定要秀米的功能，咋整？換編輯器？懟客戶？換編輯器是不可能換的，這輩子都不可能換的，懟客戶又不會，只能自己開發一個這樣子，

下面直接上成品，有興趣的繼續往下看，沒興趣直接拷貝倉庫研究，

示例地址：在線預覽

github倉庫：https://github.com/font-size/quill-xiumi-135

本文教你如何在vue專案中使用quill編輯器集成秀米編輯器和135編輯器，

　　秀米樣式

　　直接復制到quill的樣式

1：解決思路

quill中有自定義的blot，可以防止過濾掉自己不想過濾的內容，地址 https://github.com/quilljs/parchment#blots

　　在專案里自定義個blot.js

export default function (Quill) {
  // 引入原始碼中的BlockEmbed
  const BlockEmbed = Quill.import('blots/block/embed');
  // 定義新的blot型別
  class AppPanelEmbed extends BlockEmbed {
    static create(value) {
      const node = super.create(value);
      // node.setAttribute('contenteditable', 'false');
      // node.setAttribute('width', '100%');
      //   設定自定義html
      node.innerHTML = this.transformValue(value)
      return node;
    }

    static transformValue(value) {
      let handleArr = value.split('\n')
      handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
        .replace(/[\s]+$/, ''))
      return handleArr.join('')
    }

    // 回傳節點自身的value值 用于撤銷操作
    static value(node) {
      return node.innerHTML
    }
  }
  // blotName
  AppPanelEmbed.blotName = 'AppPanelEmbed';
  // class名將用于匹配blot名稱
  AppPanelEmbed.className = 'rich-innerHtml';
  // 標簽型別自定義
  AppPanelEmbed.tagName = 'div';
  Quill.register(AppPanelEmbed, true);
}

　　接著在vue頁面引入

// 引入原始組件
  import * as Quill from 'quill'
  // 引入核心樣式和主題樣式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  // 引入自定義blot
  import blotSelect from './components/blot'
  blotSelect(Quill)

　　通過自定義blot只完成了一步，即開辟了一個不會被quill過濾的通道，那如何讓秀米代碼走這里呢？

我們打開秀米官網，找到頁面底部的"第三方對接秀米"，點擊打開后進入 https://ent.xiumi.us/ue/

　　下載這個頁面

看頁面代碼，秀米自己包了一層iframe，通過層層傳遞message的方式，向上傳遞資料，最后被ueditor接收到，然后插入到編輯器里，

那么我們手動改，改成quiill接收，并通過我們之前自定義的blot通道插入內容即可，

　　xiumi-ue-dialog-v5.html 頁面js代碼修改

    var parent = window.parent; // quill實體 修改1
    var xiumi = document.getElementById('xiumi');
    var xiumi_url = window.location.protocol + "//xiumi.us";
    xiumi.onload = function () {
        console.log("postMessage");
        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) {
            parent.setRichText(event.data) // 插入內容 修改2
            // editor.execCommand('insertHtml', event.data);
            // dialog.close();
        }
    }, false);

資料傳輸功能已經完成，現在來完善整個流程，

秀米需要彈出框，我們下載了antdUi（你也可以用elementUi），使用里面的modal組件，

　　app.vue

  <a-modal v-model="visible" title="秀米" width="90%" :footer="null" :maskClosable="false" :centered="true" :keyboard="false">
      <div v-if="visible">
        <iframe src="./pluging/xiumi-ue-dialog-v5.html" frameborder="0" width="100%" :height="(fullheight - 150)+'px'" id="xiumiIframe"></iframe>
      </div>
    </a-modal>

　　app.vue 相關js

    setRichText(e) {
      const index = this.selection?this.selection.index: 0
      this.quill.insertEmbed(index ||  0, 'AppPanelEmbed', e)
      this.visible = false
      this.visible2 = false
    },
    showModal() {
      this.visible = true
    },

注意，需要把 setRichText方法系結到window上，這樣在xiumi-ue-dialog-v5.html 頁面才能通過方法接收到message后插入到quill里，

  mounted () {
    // 初始化編輯器
    this._initEditor()
    window.setRichText = this.setRichText
  },

4：效果圖

4：總結

這里有幾個坑，quill直接過濾了“臟html”，沒有像ueditor可以進行配置，開始對它簡直束手無策，然后秀米官網說只支持ueditor，我通過qq群咨詢了秀米官方人員，也明確告訴我只支持ueditor，沒有支持其他編輯器的計劃，

但客戶那邊明確要秀米之類的編輯器，在專案中也不好換編輯器，只能硬著頭皮看原始碼，整個資料傳遞程序中，只需要改動最后一步，既最終把message插入到編輯器的步驟，把ueditor轉換成quill，拿到data后，再通過我們自定義的quill里的blot新通道，避免過濾樣式，最終成功插入秀米！

網上目前沒有相關quill集成秀米的示例，我希望我的方法能提供大家一些思路，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2406.html

標籤：JavaScript

上一篇：蒲公英 · JELLY技術周刊 Vol.18 關于 React 那些設計

下一篇：JavaScript 資料型別