vue里面使用quill-editor富文本编辑器

最新推荐文章于 2025-03-05 16:49:41 发布

hsCBY

最新推荐文章于 2025-03-05 16:49:41 发布

阅读量563

点赞数

分类专栏：技术文章标签： vue 富文本编辑器 quill-editor

本文链接：https://blog.youkuaiyun.com/hsCBY/article/details/100551768

版权

技术专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成并使用Quill-editor富文本编辑器，包括必要的安装步骤、资源引入及基本配置方法。

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

在vue里面使用quill-editor富文本编辑器

这里默认大家已经把项目框架都搭建完毕，直接说明怎么使用
下载：
npm install -s vue-quill-editor
npm install quill
在main.js( 项目入口文件 )中进行引入

import VueQuillEditor from 'vue-quill-editor'
//加载css样式资源，必不可少
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

在template中使用

 <quill-editor 
    //在富文本编辑器中写入的文本
    v-model="content" 
    
    ref="myQuillEditor" 
    :options="editorOption" 
    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
    @change="onEditorChange($event)">
</quill-editor>

这样就有一个简易的富文本编辑器了
更加详细的文档