iView + vue-quill-editor 實現一個富文本編輯器（包含圖片，視頻上傳）

1. 引入插件（注意IE10如下不支持）

npm install vue-quill-editor --save
npm install quill --save （Vue-Quill-Editor須要依賴）

2. 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)

3.頁面使用

import { quillEditor } from 'vue-quill-editor'

<div v-show="tuWen" class="tu-wen">
          <Upload
            id="iviewUp"
            :show-upload-list="false"               // 自動上傳列表可見
            :on-success="handleSuccessQuill"
            :format="['jpg','jpeg','png','gif']"
            :headers= "header"                     // 設置請求頭
            name="richTextAccessory"
            :max-size="2048"
            multiple
            :action="uploadRichTextImg"              // 上傳接口
            style="display:none;"
            >
            <Button icon="ios-cloud-upload-outline" ></Button>
        </Upload>
         <quill-editor
            v-model="content"                  // 內容
            ref="myQuillEditor"                // 獲取文本節點
            :options="editorOption"            
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            >
          </quill-editor>
</div>

4，工具欄配置

// 工具欄配置
    const toolbarOptions = [
      ['bold', 'italic', 'underline'],
      [{'size': ['small', false, 'large', 'huge']}],
      [{'color': []}, {'background': []}],          // dropdown with defaults from theme
      [{'font': []}],
      [{'align': []}],
      ['image'],                                // remove formatting button
    ]

data（）{

  uploadRichTextImg： ‘’   //上傳圖片地址接口

  uploadList:[], //富文本編輯器的圖文列表

  content: '',//富文本里的內容
editorOption: {//富文本編輯器的工具欄
  modules: {
    toolbar:{
      container: toolbarOptions,  // 工具欄
      handlers: {
        'image': function (value) {     // 對圖片進行改造，默認是經過base64 ,現經過iview 去傳。
          if (value) {
              document.querySelector('#iviewUp input').click()
          } else {
              this.quill.format('image', false);
          }
        }
      }
    },
  },
  imageResize: {}, //自定義拉伸
  placeholder: '請輸入文章內容',
},

contentTxt: '',//富文本編輯器裏的前面100個文字

}


methods：{

   onEditorChange(e){

      let _this = this;

      _this.content = e.html ;  //標籤以<p></p> 形式渲染 （重點）
      _this.contentTxt = e.text.substr(0,100);

   }
}

5.  在上傳成功回調中把src 的url 插入

 // 富文本編輯器的上傳圖片成功的操做
         handleSuccessQuill (res) {
           console.log(res)
            // 獲取富文本組件實例
            let quill = this.$refs.myQuillEditor.quill
            // 若是上傳成功
            if (res) {
                // 獲取光標所在位置
                let length = quill.getSelection().index;
                // 插入圖片，res爲服務器返回的圖片連接地址
                quill.insertEmbed(length, 'image', res.data.path)
                // 調整光標到最後
                quill.setSelection(length + 1)
            } else {
                // 提示信息，需引入Message
                Message.error('圖片插入失敗')
            }
},