Как использовать href в Vue и Quill - PullRequest
Новая
       22

Как использовать href в Vue и Quill

1 голос
/ 11 марта 2020

Я использую редактор Quill в Vue. js, и он отлично работает. У меня есть изображения и т.д. c.

Но ... ссылка не работает. Я пробовал как "снег", так и "пузырь" темы.

Я набираю текст, выделяю его и затем нажимаю «ссылку». Я получаю диалоговое окно для установки ссылки, но тогда ссылка отсутствует.

Она работает в версии JavaScript, но не Vue.

Ниже приведен мой код , 


<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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
    }

})





<!DOCTYPE html>


    Trying to use the Quill Editor in Vue


    
        
            
        
        I need the v-html directive: 
        Raw data: {{ model }}
Переключение

Любой Помощь очень ценится.

Спасибо, D

1 Ответ

1 голос
/ 12 марта 2020

Мне также пришлось поместить «ссылку» в «форматы»: 

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

Я обновил свой фрагмент кода с правильным ответом на случай, если у кого-то еще возникнет эта проблема.

Спасибо!

...