vue 使用 vue-quill-editor 富文本編輯器，及對其改造爲圖片自動上傳至圖片服務器

 博主是在element-admin 模板中使用的：

引入編輯器：

npm install vue-quill-editor

 在你需要編輯器的頁面引入它：

import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"

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

 註冊使用：

 components: {
    quillEditor
  },

頁面引用：

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />

 對應數據綁定：

components: {
    quillEditor
  },
data () {
  return {
    content: '',
    editorOption: {} 
  }
},

至此就可以正常使用了：

 

數據能夠很好以text的格式的存儲在mysql中（服務器格式爲String），但是直接存儲的圖片是以base64轉碼後直接存儲的，因爲容量大小，讀取速度等關係所以直接存儲並不太合適

一般情況下都是把圖片等資源存儲在其他地方，以cdn或者oss的方式進行遠程調用，博主用的是阿里雲oss，沒有的話臨時可以自己用Nginx搭建個僞CDN服務器。

下面開始改造：

（改造是從一位大佬那裏學習的，自己根據環境實際改造了下，大佬博客：https://blog.csdn.net/lyj2018gyq/article/details/82585194）

首先是引用頁面的標籤精簡改造（相對於大佬我又添加了字體顏色和代碼塊，感覺還是比較有用）：

    <el-form-item label="簡介" style="height:500px;">
        <quilleditor
          v-model="courseInfo.description"
          ref="myTextEditor"
          :options="editorOption"
          @change="onChange"
          style="height:400px;"
        >
          <div id="toolbar" slot="toolbar">
            <select class="ql-size">
              <option value="small"></option>
              <!-- Note a missing, thus falsy value, is used to reset to default -->
              <option selected></option>
              <option value="large"></option>
              <option value="huge"></option>
            </select>

          <!--顏色種類自己添加-->
            <select class="ql-color">
              <option value="red"></option>
              <option value="black" selected></option>
              <option value="yellow"></option>
              <option value="blue"></option>
              <option value="#003366"></option>
              <option value="#148866"></option>
            </select>

            <!-- Add subscript and superscript buttons -->
            <span class="ql-formats">
              <button class="ql-script" value="sub"></button>
            </span>
            <span class="ql-formats">
              <button class="ql-script" value="super"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-bold"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-italic"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-blockquote"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-list" value="ordered"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-list" value="bullet"></button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-link"></button>
            </span>
            <span class="ql-formats">
              <button class="ql-code-block"></button>
            </span>
            <span class="ql-formats">
              <button type="button" @click="imgClick" style="outline:none">
                <svg viewBox="0 0 18 18">
                  <rect class="ql-stroke" height="10" width="12" x="3" y="4" />
                  <circle class="ql-fill" cx="6" cy="7" r="1" />
                  <polyline
                    class="ql-even ql-fill"
                    points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"
                  />
                </svg>
              </button>
            </span>
            <span class="ql-formats">
              <button type="button" class="ql-video"></button>
            </span>
          </div>
        </quilleditor>
      </el-form-item>

 然後是引入依賴：

import courseApi from "@/api/edu/course" // element-admin模板集成了接口調用，這裏是上傳圖片的axios方法所在文件的引用

import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"

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

course.js裏面的axios方法：

import request from '@/utils/request'

export default {
    uploadFile(file) {
        return request({
            url: `/service-oss/file/upload`,
            method: 'post',
            data: file
        })
    }
}

文本頁數據+方法： 

export default {
  name: "v-editor",
  props: {
    value: {
      type: String
    },
    /*上傳圖片的file控件name*/
    fileName: {
      type: String,
      default: "file"
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 500
    }
  },
  data() {
    return {
      courseInfo: {
        description: "",
      },
      editorOption: {
        // some quill options
        modules: {
          toolbar: "#toolbar"
        }
      }
    };
  },
  created() {
  },
  methods: {
    onChange() {
      this.$emit("input", this.courseInfo.description);
    },
    /*選擇上傳圖片切換*/
    onFileChange(e) {
      var fileInput = e.target;
      if (fileInput.files.length === 0) {
        return;
      }
      this.editor.focus();
      if (fileInput.files[0].size > this.maxUploadSize) {
        this.$message.error("圖片不能大於500KB");
        return;
      }
      var data = new FormData();
      data.append(this.fileName, fileInput.files[0]);
      courseApi.uploadFile(data).then(res => {
        if (res.data) {
          this.editor.insertEmbed(
            this.editor.getSelection().index,
            "image",
            res.data.url //"url" 對應後臺返回的圖片地址對應的key
          );
        }
      });
    },
    /*點擊上傳圖片按鈕*/
    imgClick() {
      /*內存創建input file*/
      var input = document.createElement("input");
      input.type = "file";
      input.name = this.fileName;
      input.accept = "image/jpeg,image/png,image/jpg,image/gif";
      input.onchange = this.onFileChange;
      input.click();
    }
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    }
  },
  components: {
    quilleditor: quillEditor
  },
  mounted() {
    this.courseInfo.description = this.value;
  },
  watch: {
    value(newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.courseInfo.description) {
          this.courseInfo.description = newVal;
        }
      }
    }
  }
}

 測試下：

 測試OK，取值回顯也是沒問題的！

 

 此處的富文本編輯器去除了多餘的功能，下面是該富文本全部功能，自己對照着可以選擇性添加

（方法就是那個class樣式，玄學程序員一猜就知道啦！๑乛◡乛๑）

toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean'],
      ['link', 'image', 'video']
    ]