如何在心轴编辑器中显示来自v模型的数据

时间:2019-05-06 07:20:03

标签: vue.js quill

我想用v模型数据填充Quill编辑器。问题在于它根本不显示该数据。

我已经用value =“ test”填充了它,并且可以正常工作。

//description contains a string text 
<InputQuill v-model="description"/>

我的羽毛笔组件的代码如下:

<template>
    <div ref="editor"></div>
</template>

<script>
    import Quill from "quill";

    export default {
        name: 'InputQuill',
        props: {
            value: {
                type: String,
                default: ""
            }
        },

        data() {
            return {
                editor: null
            };
        },
        mounted() {
            this.InputQuill = new Quill(this.$refs.editor, {
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, 4, false] }],
                        ['bold', 'italic', 'underline']
                    ]
                },
                theme: 'snow',
                //formats: ['bold', 'underline', 'header', 'italic']
            });

            this.InputQuill.root.innerHTML = this.value;

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

        methods: {
            update() {
                this.$emit('input', this.InputQuill.getText() ? this.InputQuill.root.innerHTML : '');
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    /*@import "~quill/dist/quill.core.css";*/
    @import "~quill/dist/quill.snow.css";
</style>

0 个答案:

没有答案