vue-quill-editor的用法

1. main.js引入vue-quill-editor

import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

2. 具体代码

<template>
　　<quill-editor v-model="txt" ref="richAnalysis" :options="options"></quill-editor>
</template>

export default {
　　data() {
　　　　return {
　　　　　　txt: '',
　　　　　　options: {
　　　　　　　　modules: {
　　　　　　　　　　toolbar: [

　　　　　　　　　　　　['bold', 'italic', 'underline', 'strike', {'script': 'sub'}, {'script': 'super'}]

　　　　　　　　　　　]

　　　　　　　　　　},

　　　　　　　　　　placeholder: '请输入内容'

　　　　　　　　}

　　　　}
　　},

　　mounted() {

　　　　//　　阻止光标默认选中

　　　　this.$refs.richAnalysis.quill.enable(false);

　　　　setTimeout(() => {

　　　　　　this.$refs.richAnalysis.quill.enable(true);

　　　　　　this.$refs.richAnalysis.quill.blur();

　　　　}, 200)

　　}

}

3. 光标处插入内容，光标位置向前移动一位

　　　　addBlock() {
            document.execCommand('insertText', true, '{q:}')　　//　　光标处插入内容{q:}
            this.$nextTick(() => {
                const index = this.$refs.richAnalysis.quill.selection.savedRange.index
                this.$refs.richAnalysis.quill.setSelection(index -1, 0)　　//　　光标位置移动到冒号之后
            })
        }