vue 使用quill富文本编辑增加表格功能

最新推荐文章于 2025-03-04 10:12:04 发布

2号自信

最新推荐文章于 2025-03-04 10:12:04 发布

阅读量1.2w

点赞数 4

分类专栏：前端 JS 文章标签： vue.js javascript quill

本文链接：https://blog.csdn.net/qq_20984609/article/details/121180540

版权

本文介绍了如何在Vue项目中使用Quill富文本编辑器的2.0开发版实现表格功能，包括安装2.0.0-dev.4版本、自定义图标以及解决在获取编辑器DOM时遇到的问题。文章指出，Quill 1.0不支持表格，而2.0版本内置了表格功能，但Vue-Quill-Editor插件依赖的是1.0版本，需要手动升级Quill并修改组件代码才能正常使用表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看结果：

必要条件：

1.需要quill版本为2.0的开发版（发布正式版只有1.0的）

使用npm view quill查看版本，最新的dev版本为dev.4，官方文档好像是说按得dev.3

我直接按的dev.4：npm install quill@2.0.0-dev.4 --save

2.准备图标

参考文章：quill-editor 2.0 集成 vue - 简书

默认的只有一个图标（插入表格的），增加行、列的需要自己弄一下。以下是图标代码。后面整体代码有使用。

const ICON_SVGS = {
    'table-insert-row': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-stroke ql-thin ql-transparent">
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
      </g>
      <rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
      <polygon class="ql-fill ql-stroke ql-thin" points="4.5 11 2.5 9 4.5 7 4.5 11"></polygon>
      <line class="ql-stroke" x1="6" x2="4" y1="9" y2="9"></line>
    </svg>`,
    'table-insert-column': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-transparent">
        <rect height="10" rx="1" ry="1" width="4" x="12" y="2"></rect>
        <rect height="10" rx="1" ry="1" width="4" x="2" y="2"></rect>
      </g>
      <path class="ql-fill" d="M11.354,4.146l-2-2a0.5,0.5,0,0,0-.707,0l-2,2A0.5,0.5,0,0