富文本编辑器--Quill

介绍

Quill 是一个功能强大且易于使用的富文本编辑器，广泛用于 Web 应用程序中。它提供了丰富的 API 和插件生态系统，使得开发者可以轻松地定制和扩展其功能。

官网地址：VueQuill | Rich Text Editor Component for Vue 3

如何安装？

npm install @vueup/vue-quill@latest --save

如何使用？

导入组件和样式：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

页面长使用quill组件：

<quill-editor
              theme="snow"
              v-model:content="articleModel.content"
              contentType="html"
              >
</quill-editor>

样式美化：

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

使用效果

 

常见配置选项

主题

Quill 提供了两种主题：snow 和 bubble。

• snow：默认的主题，提供了一个完整的工具栏。
• bubble：轻量级的主题，适合简单的编辑需求。

var quill = new Quill('#editor-container', {
  theme: 'snow'
});

工具栏

你可以自定义工具栏的按钮和下拉菜单。

var quill = new Quill('#editor-container', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'video']
    ]
  }
});

读取和设置内容

你可以通过 quill.root.innerHTML 获取编辑器的内容，或者使用 quill.setContents 设置内容。

// 获取内容
var content = quill.root.innerHTML;

// 设置内容
quill.setContents([
  { insert: 'Hello World!' },
  { insert: 'Some bold text', attributes: { bold: true } }
]);