vue-quill-editor富文本编辑器使用步骤

JavaPhp开发

于 2022-11-03 15:46:28 发布

阅读量198

点赞数

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

本文链接：https://blog.youkuaiyun.com/MLONGKRT/article/details/127671817

版权

本文详细介绍了vue-quill-editor的使用步骤，包括安装、在项目中引入、组件编写及配置option，帮助开发者实现前端富文本编辑功能。

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

1.安装

npm install vue-quill-editor -S

2.引入到项目中

有两种挂载方式：全局挂载和在组件中挂载，根据自己的项目需求选择，一般用到富文本编辑都是在某一个项目中，这里只写在项目中挂载的方式

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

3.在页面上写组件

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready=&

最低0.47元/天解锁文章