1. 程式人生 > >Vue2 封裝的 Quill 富文字編輯器元件 Vue-Quill-Editor

Vue2 封裝的 Quill 富文字編輯器元件 Vue-Quill-Editor

1、安裝  

npm install vue-quill-editor --save
2、使用
引入vue-quill-editor
import { quillEditor } from 'vue-quill-editor'
<!-- -->
<quill-editor ref="myTextEditor"
							    :content="content"//內容對應的欄位
							    :options = "editorOption"
							    @change="onEditorChange($event)">//內容改變事件
							</quill-editor>

export default {
  	components: {
    	quillEditor
   },data(){
     content:""
},methods: {
    onEditorChange({ editor, html, text }) {//富文字編輯器  文字改變時 設定欄位值
        this.content = html
    }
}}


參考文章:https://www.awesomes.cn/repo/surmon-china/vue-quill-editor