vue 如何引入富文本插件vue-quill-editor

最新推荐文章于 2025-06-16 18:44:08 发布

小陈同学，，

最新推荐文章于 2025-06-16 18:44:08 发布

阅读量782

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/ping_lvy/article/details/105795812

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成并使用Quill富文本编辑器，包括安装依赖包、注册组件、配置模板及数据部分，附带效果展示。

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

官网链接:

https://github.com/surmon-china/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 模板内容

<template>

  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption" 
  />


</template>

4 数据部分

  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // Some Quill options...
        }
      }
    },

5 效果图：