鹅毛笔中的雪花菜单未在vue.js中使用v-if或v-show隐藏_Vue.js_Quill

鹅毛笔中的雪花菜单未在vue.js中使用v-if或v-show隐藏

vue.js

鹅毛笔中的雪花菜单未在vue.js中使用v-if或v-show隐藏,vue.js,quill,Vue.js,Quill,我在一个名为“编辑器”的组件中使用羽毛笔。我遇到的问题是，如果我在HTML中的组件上使用v-if或v-show，编辑器将隐藏，但snow菜单将保留。如果我切换，我会得到多个雪地菜单还有其他人遇到过这个问题吗下面是我的标记 Vue.component('editor', { template: '<div ref="editor"></div>', props: { value: { type: String,

我在一个名为“编辑器”的组件中使用羽毛笔。我遇到的问题是，如果我在HTML中的组件上使用v-if或v-show，编辑器将隐藏，但snow菜单将保留。如果我切换，我会得到多个雪地菜单

还有其他人遇到过这个问题吗

下面是我的标记

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
    }

})

Vue.component（'editor'{
模板：“”，
道具：{
价值：{
类型：字符串，
默认值：“”
}
},
数据：函数（）{
返回{
编辑：空
};
},
挂载：函数（）{
this.editor=新羽毛笔（this.$refs.editor{
模块：{
工具栏：[
[{header:[1,2,3,4，false]}，
[“粗体”、“斜体”、“下划线”]，
[‘图像’、‘代码块’、‘链接’]
]
},
//主题:"泡沫",，
主题:"雪",，
格式：[“粗体”、“下划线”、“标题”、“斜体”]，
占位符：“在此处键入内容！”
});
this.editor.root.innerHTML=this.value；
this.editor.on（'text-change'，（）=>this.update（））；
},
方法：{
更新：函数（）{
this.$emit（'input'，this.editor.getText（）？this.editor.root.innerHTML:“”）；
}
}
})
新Vue({
el:'根'，
数据：{
//模型：“测试编辑器”
型号：''，
伊莎琳：是的
}
})

这是我的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中使用羽毛笔编辑器
我需要v-html指令：
原始数据：{{model}}
<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>

切换

除了链接外，图像、编辑器等都可以完美地工作。如果高亮显示文本并单击工具栏上的“链接”按钮，则会出现保存链接的对话框

但它并没有保存链接

有什么想法吗？谢谢

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

对于雪，我把v-if放在一个包装袋上

编辑

呃，我把这个修好了。我现在对href链接有问题。这里是：