決圖片溢出，樣式不對問題，個人博客開發（三）

廢話：

最近寫博客。重新寫了下文章編輯器。用的quill.js，覺得應該分享下。有些坑還是需要注意下的。

一、vue-quill-editor引入和使用

1、先放官方的一個文檔地址：

https://github.surmon.me/vue-quill-editor/

npm地址：https://www.npmjs.com/package/vue-quill-editor

2、使用方式（個人推薦）

個人用的是對應的頁面單獨引入，而不是全局引入。全局引入會引起一些不必要的麻煩。

import { quillEditor } from 'vue-quill-editor' 
export default {  components: {    quillEditor  }}

vue頁面：

<quill-editor
  ref="QuillEditor"
  class="quill-dht"
  :options="editorOption"
  v-model="content"
  @blur="onEditorBlur($event)"
  @focus="onEditorFocus($event)"
  @ready="onEditorReady($event)"
  @change="onEditorChange($event)"
></quill-editor>

注意上面的幾個事件，具體就不需要我來解釋了吧

個人是change事件有使用，就是使用的時候大家注意節流或者防抖

事件裏面關鍵的是返回一個對象數據，比較常用的是text字段，這個是富文本的純文本內容，在文章的簡介方面比較有用。不然v-model裏面的是包含了html元素的。自己剔除多麻煩。

放一下關於我的配置項

editorOption: {
  theme: "snow", //注意樣式問題
  placeholder: "開始創作……",
  debug: false,
  modules: {
    // 自定義菜單欄
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"], // toggled buttons
        ["blockquote", "code-block"],
        [{ header: 1 }, { header: 2 }], // custom button values
        [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
        [{ direction: "rtl" }], // text direction
        [{ size: ["small", false, "large", "huge"] }], // custom dropdown
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ align: [] }],
        ["link", "image"],
        ["clean"] // remove formatting button
      ],
        //自定義按鈕事件，我這裏自定義了image的上傳方式
      handlers: {
        image: value => {
          if (value) {
            this.upload_type = 1;
            this.$refs.upload.click();
          } else {
            this.quill.format("image", false);
          }
        }
      }
    },
    // imageDrop: true,
    // 開啓圖片拖拽上傳，以及自定義大小
    imageResize: {
      displayStyles: {
        backgroundColor: "black",
        border: "none",
        color: "white"
      }
    },
    ImageExtend: {
      // 如果不作設置，即{}  則依然開啓複製粘貼功能且以base64插入
      name: "img", // 圖片參數名
      size: 1, // 可選參數 圖片大小，單位爲M，1M = 1024kb
      action: uploadImg,
      response: res => {
        return this.$api.static().visit + res.data;
      },
      headers: xhr => {
        xhr.setRequestHeader("Authorization", user_info.sign);
      },
      sizeError: () => {
        this.$notify({
          title: "上傳失敗",
          type: "error",
          message: "圖片大小超過1M"
        });
      },
      start: () => {}, // 可選參數 自定義開始上傳觸發事件
      end: () => {}, // 可選參數 自定義上傳結束觸發的事件，無論成功或者失敗
      // 可選參數 上傳失敗觸發的事件
      error: e => {
        console.log(e);
        this.$notify({
          title: "上傳失敗",
          type: "error",
          message: "圖片大小超過1M"
        });
      }
    }
  }
},

3、樣式的引入

因爲用的是vue組件所以不需要擔心樣式問題，但是大家注意下樣式必須在全局引用。除非你打算自定義一遍按鈕的事件。原因在於樣式不僅僅是你在編輯器頁面要用，你後面文章的瀏覽頁面也需要使用的。

引用的話再main.js中，看你用哪個，就引用哪個。注意要和上面的配置項在對應

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

4、文章編輯完畢，你需要發佈，關鍵點，網上多數文章沒有說這塊

網上的常規方式是：

<section class="ql-editor" v-html="info.content"></section>

v-html裏面是剛纔編輯器v-model裏面的內容。

但是這樣用之後大家會發現，唉，我圖片超出容器了。字體大小不對。樣式也不一樣。怎麼和我編輯器的內容差別這麼大。

原因：

1、你的樣式沒有全局引入

2、上面的方式引入方式是錯誤的（我上面給的官方都沒有說，坑）

解決：

1、樣式好解決，並且我上面提前說過了

2、html內容的格式錯了

這個我其實是通過f12仔細觀察編輯器的編輯的html內容發現的。

注意看圖片，實際編輯器的編輯內容區域是在下面幾個div內容裏面的，並且很多的內容是有獨立css的

上圖：

所以其實正確的內容展示方式是（如果樣式不對，那麼就多參考下編輯器當中的樣式）：

<div class="ql-snow">
  <section class="ql-editor" v-html="info.content"></section>
</div>

基本上這樣之後我的內容就和編輯器同步了，並且圖片等都不會溢出

二、好用的插件介紹

1、quill-image-resize-module，支持圖片在編輯的時候調整大小和位置

使用：

import { quillEditor, Quill } from "vue-quill-editor";
// 支持圖片縮放
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);

editorOption: {
  theme: "snow",
  placeholder: "開始創作……",
  debug: false,
  modules: {
    imageResize: {
      displayStyles: {
        backgroundColor: "black",
        border: "none",
        color: "white"
      }
    }
  }
},

具體多看官方文檔，挺簡單的

2、quill-image-extend-module支持拖拽進來的圖片上傳到服務器

使用：

import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

我這裏代碼太亂了，我直接放官方地址，比看我的代碼好很多

git：https://github.com/NextBoy/quill-image-extend-module

3、自定義圖片上傳（個人用的elementUI）

主要是工具欄配置這裏

// 自定義菜單欄
toolbar: {
  container: [
    ["bold", "italic", "underline", "strike"], // toggled buttons
    ["blockquote", "code-block"],
    [{ header: 1 }, { header: 2 }], // custom button values
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction
    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ align: [] }],
    ["link", "image"],
    ["clean"] // remove formatting button
  ],
  handlers: {
    image: value => {
      if (value) {
        this.upload_type = 1;
        this.$refs.upload.click();
      } else {
        this.quill.format("image", false);
      }
    }
  }
},

elementUI部分

<el-upload
  :headers="headers"
  :action="uploadImg"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <div ref="upload"></div>
</el-upload>

主要是圖片上傳成功之後：

// 獲取光標所在位置
let length = quill.getSelection().index;
// 插入圖片，res爲服務器返回的圖片鏈接地址
quill.insertEmbed(
  length,
  "image",
  this.$api.static().visit + res.data
);
// 調整光標到最後
quill.setSelection(length + 1);

三、致謝

感謝quill富文本編輯器，雖然個人也嘗試過開發。但是別人比你好，你不得不承認。