vue-quill-editor设置disabled

最新推荐文章于 2025-06-04 09:57:50 发布

Beamon__

最新推荐文章于 2025-06-04 09:57:50 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/Beamon__/article/details/103159328

其他专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用vue-quill-editor实现富文本编辑器的禁用效果，通过添加disabled属性并利用enable方法控制编辑状态，适用于需要限制编辑功能的场景。

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

最近项目用到了vue-quill-editor，但是有场景要给富文本编辑器添加disabled效果，查看官网api后得到以下解决方案，直接上代码

html：

<template>
    <div 
        class="my-editor-comp">
        <quill-editor 
            :class="[disabled ? 'is-disabled' : '']"
            v-model="content" 
            ref="myQuillEditor" 
            :options="options" 
            @focus="onFocus($event)"
            @blur="onBlur($event)">
        </quill-editor>
    </div>
</template>

js：

<script>
// 添加富文本编辑器require配置
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 {
    name: 'MyEditor',
    components: {
        quillEditor
    },
    data(){
        return{
            // 是否显示按钮
            disabled: false,
            // 富文本内容
            content: "",
            // 富文本配置
            options: {
                modules: {
                    toolbar: {
                        container: [
                            ['bold','italic','underline','strike'],
                            [{'size':['small', false, 'large', 'huge']}],
                            [{ 'color' : [] }, { 'background' : [] }],
                            [{ 'font' : [] }],
                            [{ 'align' : [] }],
                            ['link', 'image'],
                        ],
                    }               
                },
                placeholder: "请输入",
            },
        }
    },
    methods: {
        /** 
         * @method 鼠标进入
        */
        onMouseover(){
            if(this.disabled){
                this.$refs.myQuillEditor.quill.enable(false);
            }
        },
        /** 
         * @method 鼠标离开
        */
        onMouseleave(){
            if(this.disabled){
                this.$refs.myQuillEditor.quill.enable(true);
            }
        },
    }
}
</script>