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)  //  光標位置移動到冒號之后
            })
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM