时间戳

首页 > 解决方案 > Quill 中的雪景菜单不会在 vue.js 中使用 v-if 或 v-show 隐藏

vue.js - Quill 中的雪景菜单不会在 vue.js 中使用 v-if 或 v-show 隐藏

问题描述

我在一个名为“编辑器”的组件中使用 quill。我遇到的问题是，如果我在 HTML 中的组件上使用 v-if 或 v-show，编辑器将被隐藏，但雪菜单仍然存在。如果我切换，我会得到多个雪菜单。

有没有其他人遇到过这个问题？

下面是我的标记

Vue.component('editor', {
    template: '<div ref="editor"></div>',

    props: {
        value: {
            type: String,
            default: ''
        }
    },

    data: function() {
        return {
            editor: null
        };
    },
    mounted: function() {
        this.editor = new Quill(this.$refs.editor, {
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block', 'link']
                ]
            },
            //theme: 'bubble',
            theme: 'snow',
            formats: ['bold', 'underline', 'header', 'italic'],
            placeholder: "Type something in here!"
        });

        this.editor.root.innerHTML = this.value;

        this.editor.on('text-change', () => this.update());

    },
    methods: {
        update: function() {
            this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
        }
    }
})

new Vue({
    el: '#root',
    data: {
        //model: 'Testing an editor'
        model: '',
        isShowing: true
    }

})

这是我的 HTML 标记

<!DOCTYPE html>
<html>
<head>
    <title>Trying to use the Quill Editor in Vue</title>

    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <div id="root">
        <div v-if="isShowing">
            <editor v-model="model"></editor>
        </div>
        <p>I need the v-html directive: <span v-html="model"></span></p>
        <p>Raw data: <pre>{{ model }}</pre></p>
        <button @click="isShowing = !isShowing">Toggle</button>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="quill_in_wrapper_ie11.js"></script>

</body>
</html>

图像、编辑器等工作完美，除了链接。如果我突出显示文本并单击工具栏上的链接按钮，我会得到保存链接的对话框。

但它不会保存链接。

有什么想法吗？谢谢

标签： vue.jsquill

解决方案

对不起，我回答修复了雪菜单问题。我现在的链接有问题。

对于雪，我将 v-if 放在一个包装 div 上。

编辑

<div class="agendaAreaEditor" id="objectives" 
 v-on:keypress="checkTextArea('objectives')" 
 v-show="showMeetingObjective || editMeetingObjective" 
 v-bind:class="{error: agenda.objective.trim().length===0 && showValidationErrors}"> 
    <editor v-model="agenda.objective"></editor>
</div>

推荐阅读