<template>
    <div class="txtMain">
        <quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />
    </div>
</template>
  
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
    name: 'txtMain',
    props: [
        'textVisible',
        'content'
    ],
    components: {
        quillEditor
    },
    data() {
        return {
            contentValue: this.content,
            editorOption: {
                // Some Quill options...
            }
        };
    },
    methods: {
        onEditorBlur(quill) {
            console.log('editor blur!', this.content, quill)
        },
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
            console.log('editor ready!', quill)
        },
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        }
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    },
    mounted() {
        // console.log(this.content,'uuuuuuuuu');
        this.contentValue = this.content;
    },
};
</script>
  
<style scoped></style>