vue-quill-editor+vue-better-table結合使用,實現表格插入/合並等問題;

首先項目集成以下兩個依賴:

vue-quill-editor:https://www.jianshu.com/p/8eb2bb78b641

vue-better-table:https://blog.csdn.net/sinat_27746197/article/details/105952089

最終文件結果:

下載 https://i.cnblogs.com/files  此鏈接中的src.zip文件

其中, src/commponents/quill/index.vue和src/view/editor/index.vue就是結合后的完美體現.

 

,,,,,最后發現,插入表格的功能是有問題的,在src/view/editor/index.vue文件添加以下內容.

handlers: {
              table: function() {
                //默認插入的表格行列數
                this.quill.getModule("better-table").insertTable();
              }
 }

insertColumnRight: {
                      text: '右邊插入一列'
                    },
                    insertColumnLeft: {
                      text: '左邊插入一列'
                    },
                    insertRowUp: {
                      text: '上邊插入一行'
                    },
                    insertRowDown: {
                      text: '下邊插入一行'
                    },
                    mergeCells: {
                      text: '合並單元格'
                    },
                    unmergeCells: {
                      text: '拆分單元格'
                    },
                    deleteColumn: {
                      text: '刪除列'
                    },
                    deleteRow: {
                      text: '刪除行'
                    },
                    deleteTable: {
                      text: '刪除表格'
                    }

還是整個文件來一個叭

<template>
  <div class="in-editor-wrapper">
    <div class="in-editor ql-editor"></div>
  </div>
</template>

<script>
// 引入原始組件
import Quill from "quill";
import QuillBetterTable from "quill-better-table";

// 引入核心樣式和主題樣式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill-better-table/dist/quill-better-table.css";
Quill.register(
  {
    "modules/better-table": QuillBetterTable
  },
  true
);
export default {
  name: "inEditor",
  props: {
    // 用於雙向綁定
    value: String
  },
  data() {
    return {
      // 待初始化的編輯器
      editor: null,
      // 配置參數
      options: {
        theme: "snow",
        modules: {
          // 工具欄的具體配置
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "super" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ["link", "image"],
              [{ table: "TD" }]
            ],
            handlers: {
              table: function() {
                //默認插入的表格行列數
                this.quill.getModule("better-table").insertTable();
              }
            }
          },
          "better-table": {
            operationMenu: {
              items: {
                unmergeCells: {
                  text: "Another unmerge cells name"
                },
                insertColumnRight: {
                  text: "右邊插入一列"
                },
                insertColumnLeft: {
                  text: "左邊插入一列"
                },
                insertRowUp: {
                  text: "上邊插入一行"
                },
                insertRowDown: {
                  text: "下邊插入一行"
                },
                mergeCells: {
                  text: "合並單元格"
                },
                unmergeCells: {
                  text: "拆分單元格"
                },
                deleteColumn: {
                  text: "刪除列"
                },
                deleteRow: {
                  text: "刪除行"
                },
                deleteTable: {
                  text: "刪除表格"
                }
              },
              background: {
                color: "#333"
              },
              color: {
                colors: ["green", "red", "yellow", "blue", "white"],
                text: "background:"
              }
            }
          },
          keyboard: {
            bindings: QuillBetterTable.keyboardBindings
          }
        },
        placeholder: "請輸入內容 ..."
      }
    };
  },
  watch: {
    // 監聽外部值的傳入，用於將值賦予編輯器
    value(val) {
      // 如果編輯器沒有初始化，則停止賦值
      if (!this.editor) {
        return;
      }

      // 獲取編輯器當前內容
      let content = this.editor.root.innerHTML;

      // 外部傳入了新值，而且與當前編輯器的內容不一致
      if (val && val !== content) {
        // 將外部傳入的HTML內容轉換成編輯器識別的delta對象
        let delta = this.editor.clipboard.convert({
          html: val
        });

        // 編輯器的內容需要接收delta對象
        this.editor.setContents(delta);
      }
    }
  },
  mounted() {
    // 初始化編輯器
    this._initEditor();
  },
  methods: {
    // 初始化編輯器
    _initEditor() {
      // 獲取編輯器的DOM容器
      let editorDom = this.$el.querySelector(".in-editor");

      // 初始化編輯器
      this.editor = new Quill(editorDom, this.options);

      // 雙向綁定
      this.editor.on("text-change", () => {
        this.$emit("input", this.editor.root.innerHTML);
      });
    }
  }
};
</script>

<style lang="scss" scope>
.in-editor-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .ql-toolbar {
    .ql-formats {
      .ql-picker-label {
        &::before {
          position: relative;
          top: -5px;
        }
      }
      button {
        i.icon {
          font-size: 14px;
        }
      }
    }
  }
  .ql-container {
    flex-grow: 1;
    height: 0;
    overflow: hidden;
  }
}
</style>

但是還有小問題,就是刪除/增加/合並行列的行為,只能通過,右鍵點擊表格操作.

右鍵點擊后出現的命令,可能 因為z-index的值 太低,而被遮擋,可以查看控制台,從而進行針對行調整.