Vue-Quill-Editor一个vue的富文本编辑器的使用

最新推荐文章于 2025-05-19 16:47:46 发布

原创

最新推荐文章于 2025-05-19 16:47:46 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用Vue-Quill-Editor这一简洁的富文本编辑器。从安装、引入到具体使用，详细讲解了编辑器的配置和自定义样式，以及如何处理相关事件。

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

最近需要做内容的编辑和上传，所以需要用到富文本编辑器。刚开始引用的百度的富文本，发现虽然功能比较多，但是还得跟后台配合，而且样式什么的也比较麻烦，所以还是用了vue-quill-editor这个编辑器，比较简单。

1 安装

npm install vue-quill-editor --save

2 引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

3 使用

<quill-editor 
    v-model="content"
    ref="myQuillEditor"
    :options="quillOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)">
  </quill-editor>

<script>
const toolOptions = [
    ['bold', 'italic', 'underline', 'strike'], 
    ['blockquote', 'code-block'], 
    [{'header': 1}, {'header': 2}], 
    [{'list': 'ordered'}, {'li