vue-quill-xiumi-135

npm i
npm run serve
自定义blot（作为防过滤秀米代码的通道），src/components/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.firstChild;
    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);
在app.vue中使用自定义的blot，src/app.vue
  import blotSelect from './components/blot'
  blotSelect(Quill)
app.vue（template），src/app.vue
  <div class="quill-box" :style="{ height: fullheight + 'px'}">
    <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>
    </a-modal>
    <a-modal v-model="visible2" title="135编辑器" width="90%" :footer="null" :maskClosable="false" :centered="true" :keyboard="false">
      <div v-if="visible2">
        <iframe src="./pluging/135EditorDialogPage.html" frameborder="0" width="100%" :height="(fullheight - 150)+'px'" id="xiumiIframe"></iframe>
    </a-modal>
    <div class="quill-editor">
      <div id="toolbar" slot="toolbar">
        <!-- Add a bold button -->
        <button class="ql-bold" title="加粗"></button>
        <!-- Add a 秀米 button -->
        <button id="custom-button-xiumi" title="秀米" @click="showModal"></button>
        <!-- Add a 135 button -->
        <button id="custom-button-135" title="135编辑器" @click="showModal2"></button>
      <div class="editor" ref="editor"></div>
app.vue（部分methods），src/app.vue
    setRichText(e) { // 通过新blot插入数据
      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
修改秀米html中js，public\pluging\xiumi-ue-dialog-v5.html
    // 可以删掉页面上的internal.js引用了
    var parent = window.parent;
    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) // ++ setRichText是app.vue暴露出来的把数据插入quill的全局方法
            // editor.execCommand('insertHtml', event.data); --
            // dialog.close(); --
    }, false);
秀米官方更新后，在本地开发环境时，无法正常插入数据到编辑器；且在ip环境下无法登录秀米。
秀米里的图片插入编辑器前需要做本地化处理，不然无法正常显示图片（被秀米锁图）。
135编辑器

https://github.com/quilljs/parchment#blots

License