CODEWITHSUNDEEP
vue.jsquill
user581733
user581733

Reputation: 504

How to use href in Vue and Quill

I am using the Quill editor in Vue.js and it's working great. I have images, etc.

But...the link isn't working. I tried both the "snow" and "bubble" themes.

I type the text, highlight it and then click on the "link". I get the dialog to set the link, but then the link isn't there.

It's working in the JavaScript version, but not the Vue.

Below is my code. 







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>

Any help is greatly appreciated.

Thanks, D

Upvotes: 1

Views: 1545

Answers (1)

user581733
user581733

Reputation: 504

I had to place a 'link' into the "formats" as well:

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

I updated my code snippet with the correct answer in case anyone else is having this problem.

Thanks!

Upvotes: 1

Related Questions