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的值 太低,而被遮挡,可以查看控制台,从而进行针对行调整.