如何在 Vue 和 Quill 中使用 href答案

【问题标题】：How to use href in Vue and Quill如何在 Vue 和 Quill 中使用 href
【发布时间】：2020-03-11 15:59:36
【问题描述】：

我在 Vue.js 中使用 Quill 编辑器，它运行良好。我有图片等。

但是……链接失效了。我尝试了“雪”和“泡泡”主题。

我键入文本，突出显示它，然后单击“链接”。我得到设置链接的对话框，但链接不存在。

它在 JavaScript 版本中工作，但不是 Vue。

下面是我的代码。




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', 'link'],
            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
    }

})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
    <title>Trying to use the Quill Editor in Vue</title>
</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>

</body>
</html>

非常感谢任何帮助。

谢谢，D

【问题讨论】：

请将此设置为可运行的 sn-p，您可以通过编辑问题并按下 sn-p 按钮来实现。把它变成一个迷你密码笔……
嗨，我刚刚输入了代码。任何帮助表示赞赏。
您必须滚动到代码中。 sn-p 在最后，

标签： vue.js quill

【解决方案1】：

我还必须在“格式”中添加一个“链接”：

formats: ['bold', 'underline', 'header', 'italic', 'link'],

我用正确的答案更新了我的代码 sn-p，以防其他人遇到这个问题。

谢谢！

【讨论】：