vue-quill-editor富文本編輯器

在工做中確定會遇到使用富文本編輯器的時候

接下來咱們就來一塊兒學習一下 vue-quill-editor

注: 本項目是在vue的腳手架中搭建

1.下載

npm install vue-quill-editor --save

2.配置

1)在main.js中引入

import vueQuillEditor from 'vue-quill-editor' // 引入富文本工具

2)在main.js中使用

Vue.use(vueQuillEditor)

3.建立vue文件

1)在頁面添加quill-editor元素

<template>
  <div>
    <quill-editor>

    </quill-editor>
  </div>
</template>

2) 在項目中顯示, 引入他

import vueQuillEditor from './vueQuillEditor.vue'

components: {
      'v-vueQuillEditor': vueQuillEditor
    }

<v-vueQuillEditor></v-vueQuillEditor>

你也可爲他添加css樣式

4)想要獲取輸入的內容你能夠綁定v-model 在加上個change時間

<quill-editor 
  class="quill" 
  v-model="progs" 
  @change="change">

</quill-editor>

5) 在js中這樣寫

export default {
      data() {
        return{
            progs: ''
        }
      },
      methods: {
          ssss: function () {
            console.log(this.progs)
          }
      }
  }

5) 這已經就能夠使用了 簡不簡單

在使用的過程當中我還遇到了圖片上傳的問題 和 漢化的問題 稍後我會吧代碼上傳