Vue 富文本编辑器（Vue-Quill-Editor）

最新推荐文章于 2025-06-24 09:15:55 发布

qq_36437172

最新推荐文章于 2025-06-24 09:15:55 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： Vue 富文本编辑器 Vue-Quill-Editor

本文链接：https://blog.youkuaiyun.com/qq_36437172/article/details/89373031

vue 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Vue-Quill-Editor富文本编辑器，包括安装依赖、引入样式、配置组件及使用方法。通过具体示例，帮助开发者快速上手。

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

Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。

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 组件

<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>

4.editorOption 为配置项：

export default {
    data(){
        return {
            content: '',
            editorOption: {
                placeholder: 'Hello World'
            }
        }
    },
    methods: {
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
        submit(){
            console.log(this.content);
            this.$message.success('提交成功！');
        }
    }
}

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