富文本编辑器 --vue-quill-editor

最新推荐文章于 2024-06-18 22:01:00 发布

菲阿菲

最新推荐文章于 2024-06-18 22:01:00 发布

阅读量327

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49575831/article/details/129445332

版权

官网地址：vue-quill-editor

1.安装

 npm install vue-quill-editor --save
 // 或者
 yarn add vue-quill-editor

2.注册全局组件

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'

// 导入富文本编辑器对应样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

3.使用

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