vue+elementui富文本編輯配置使用

1. 命令行安裝富文本編輯器插件。

npm install vue-quill-editor –D

2. src/main.js文件配置全局的vue-quill-editor。

 

import QuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.snow.css'

 

3. 使用富文本編輯，下面代碼只能參考，應為上傳服務器地址是后端提供，而上傳的參數是后端需要。

<template>
  <div class="Issuedby">
    <el-card class="el-card-box">
      <!-- 通過el-upload的uploadSuccess函數獲取上傳圖片的地址替換富文本框bs64碼圖片 -->
      <!-- :data的作用是可以向后端傳對象數據 -->
      <el-upload
        class="avatar-uploader"
        :action="URL+'/api/post/file'"
        :data="date"
        :show-file-list="false"
        :on-success="uploadSuccess">
      </el-upload>
      <!-- class="quill-editor"富文本寬度樣式， ql-editor顯示內容的空格換行。 -->
      <!-- :options="editorOption"自定義配置富文本需要的功能 -->
      <!-- @blur 失去焦點觸發事件 -->
      <!-- @focus 獲得焦點觸發事件 -->
      <!-- @change 內容改變觸發事件 -->
      <quill-editor
        class="quill-editor ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </el-card>
  </div>
</template>
<script>
import { addQuillTitle } from '@/assets/quill-title.js'
import loot from '@/assets/loot.js'

export default {
  components:{
  },
  data() {
    return {
      URL:loot.SERVE.userResource, //后端給的上傳服務器地址
      date:{ //傳給后端的對象
        token:'', //后端需要上傳圖片時綁定的token。
        videoCode:null
      },
      content: ``, //保存富文本框的內容和圖片
      editorOption: { //配置富文本需要的功能
        // theme: "snow",//默認是這個，這個代碼不注釋會顯示富文本所有的功能
        placeholder: '最多輸入10000字。',
        modules: {
          toolbar: {
            container: [
              ['italic','bold','underline'], 
              [{ 'align': [] }], 
              ['image'] 
            ],  // 工具欄
            handlers: { //這里把點擊upload的焦點綁定到富文本框圖片上
                'image': function (value) {
                if (value) {
                  document.querySelector('.avatar-uploader input').click() 
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  created () {
    // 獲取后端需要的token, 上傳圖片的時候用。
    this.getToken(); 
  },
  methods: {
    // 上傳圖片
    uploadSuccess(res, file){
      // 首先獲取富文本編輯器的實例
      let quill = this.$refs.myQuillEditor.quill
      if (res.errorCode == 200) {
          // 獲取光標所在位置
          let length = quill.getSelection().index;
          // 插入圖片res為服務器返回的數據
          quill.insertEmbed(length, 'image', loot.SERVE.file + res.result)
          // 光標移動至文本末端
          quill.setSelection(length + 1)
      } else {
        loot.Messages(this,'error','圖片插入失敗!')
      }
    },
    // 准備編輯器
    onEditorReady(editor) {
    },
    onEditorBlur() {}, // 失去焦點事件
    onEditorFocus() {}, // 獲得焦點事件
    onEditorChange(event) {
      event.quill.deleteText(100, 4) //限制輸入字數，行數。
    }, // 內容改變事件

    // 獲取上傳圖片需要的token。
    getToken () {
      this.$axios.post('/api/post/file/token',{
          userId:Number(localStorage.getItem('userId')),
          sessionId:localStorage.getItem('sessionId'),
          isMobileTerminal:0
      }).then(res => {
          if(res.errorCode == 200){
              console.log(res.result, 'token')
              this.date.token = res.result
          }
      })
    }
  }
};
</script>

<style lang='less'>
  .Issuedby {
    //卡片樣式
    .el-card-box {
      width: 1300px;
      height: 600px;
      margin: 20px auto;
      //富文本樣式
      .quill-editor {
        height: 400px;
        //內容框高度
        .ql-container.ql-snow {
          height: 300px;
        }
      }
    }
  }
</style>