VUE-element UI使用Quill富文本

最新推荐文章于 2024-08-30 18:26:03 发布

sinat_27746197

最新推荐文章于 2024-08-30 18:26:03 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/sinat_27746197/article/details/105952089

版权

本文介绍了如何在Vue项目中使用Element UI与Quill富文本编辑器，重点讲解了如何升级Quill到v2.0以支持表格，并引入quill-better-table插件。内容包括导入和配置插件、修改工具栏设置、在mounted钩子中获取富文本对象，以及与后台数据对接的方法。

摘要由CSDN通过智能技术生成

扩展功能：添加表格

实现步骤：

1、Quill目前的版本大多为v1.0，该版本不支持表格操作。

升级到v2.0版本：

npm install quill@2.0.0-dev.3 --save

2、2.0的table功能较少，需另添加一个扩展插件quill-better-table。

安装：

npm install quill-better-table

在富文本所在vue文件中导入配置：

import Quill from 'quill'
import QuillBetterTable from 'quill-better-table'
import 'quill-better-table/dist/quill-better-table.css'
Quill.register({
  'modules/better-table': QuillBetterTable
}, true)

3、修改富文本的工具栏配置，添加表格操作

editorOption: {
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{'list': 'ordered'},