vue中使用vue-quill-editor及上傳圖片到本身服務器

第一步，下載依賴

cnpm install vue-quill-editor --save

第二步，再main.js裏引入組件（我這裏是全局註冊)

// 富文本編輯器
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)

第三步，若是要上傳圖片到本身服務器的話以下

cnpm install vue-quill-editor-upload --save

接下來再組件中使用

//js布馮
import {quillRedefine} from 'vue-quill-editor-upload'
data(){
  return{
      editorOption: {
            modules:{
                toolbar:[
                    ['image'],
                    [{ 'color': [] }, { 'background': [] }]
                ]
            }
        },  
    }  
},
components: {quillRedefine},
  computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
    }
  },
methods: {
      onEditorReady(editor) { // 準備編輯器
        },
    onEditorBlur(){}, // 失去焦點事件
    onEditorFocus(){}, // 得到焦點事件
    onEditorChange(event){
        console.log(event.html)
        this.htmls = event.html
    }, // 內容改變事件
 },
created: function() {      
    let that = this;
    that.upLoadUrl=upLoadUrl+'/?width=300';
    that.editorOption = quillRedefine(
        {
          // 圖片上傳的設置
          uploadConfig: {
            action: that.upLoadUrl,  // 必填參數 圖片上傳地址
            // 必選參數  res是一個函數，函數接收的response爲上傳成功時服務器返回的數據
            // 你必須把返回的數據中所包含的圖片地址 return 回去
            res: (respnse) => {
                console.log(respnse)
                var path = respnse.path//這裏return你的圖片地址便可
              return path
            },
            name: 'img'  // 圖片上傳參數名
          },
          toolOptions: [
              [{'color': []}, {'background': []}],
              [ 'image']
          ]
        }
      )
  }

temple裏的代碼是

<quill-editor 
                                v-model="dataInfo.description" 
                                ref="myQuillEditor" 
                                :options="editorOption" 
                                @blur="onEditorBlur($event)" 
                                @focus="onEditorFocus($event)"
                                @change="onEditorChange($event)">
                            </quill-editor>

這樣就能夠正常操做了，注：上方的 upLoadUrl 須要根據大家的上傳地址修改