天天看點

Vue: wangEditor 編輯器使用示例元件封裝

文檔  https://doc.wangeditor.com/

Vue: wangEditor 編輯器使用示例元件封裝

元件封裝

依賴

# 本次示例使用版本 wangeditor=4.6.6
npm i wangeditor --save      

元件目錄

.
├── Editor.vue
├── index.scss       # 自定義樣式檔案
└── upload-image.js  # 自定義圖檔上傳      

主檔案 Editor.

vue
<template>
  <div ref="editor"></div>
</template>

<script>
import E from 'wangeditor';
import uploadImage from './upload-image.js';

/**
 * wangEditor 編輯器
 * 文檔 https://doc.wangeditor.com/
 */
export default {
  name: 'Editor',

  props: {
    // v-model
    value: { type: String, required: true },

    // placeholder
    placeholder: { type: String, default: '' },

    // height
    height: { type: Number|String, default: 100 },
  },

  model: {
    prop: 'value',
    event: 'change',
  },

  data() {
    return {
      editor: null,
    };
  },

  watch: {
    // 不能用箭頭函數
    value(val) {
      // 如果值不相等再進行指派,避免多次指派造成閃爍
      if (this.editor && val !== this.editor.txt.html()) {
        this.editor.txt.html(val);
      }
    },
  },

  methods: {
    initEditor() {
      const editor = new E(this.$refs.editor);
      editor.config.placeholder = this.placeholder;
      editor.config.height = this.height;

      // 限制類型
      // editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
      editor.config.uploadImgMaxLength = 1; // 一次最多上傳 1 個圖檔

      // 配置菜單欄,删減菜單,調整順序
      editor.config.menus = [
        'undo', // 撤銷
        'redo', // 重複
        'head', // 标題
        'bold', // 粗體
        'fontSize', // 字号
        'fontName', // 字型
        'italic', // 斜體
        'underline', // 下劃線
        'strikeThrough', // 删除線
        'indent', // 縮進
        'lineHeight', // 行高
        'foreColor', // 文字顔色
        'backColor', // 背景顔色
        'link', // 插傳入連結接
        'list', // 清單
        'todo', // 待辦
        'justify', // 對齊方式
        'quote', // 引用
        'emoticon',
        'image', // 插入圖檔
        'video', // 視訊
        'table',  // 表格
        'code',  // 插入代碼
        'splitLine', // 分割線
      ];

      // 監聽資料變化
      editor.config.onchange = this.handleContentChange;
      // 自己實作上傳圖檔
      editor.config.customUploadImg = this.handleUploadImage;

      // 建立編輯器
      editor.create();
      // 賦予初始值
      editor.txt.html(this.value);

      this.editor = editor;
    },

    handleContentChange(newHtml) {
      this.$emit('change', newHtml);
    },

    /**
     * resultFiles 是 input 中選中的檔案清單
     * insertImgFn 是擷取圖檔 url 後,插入到編輯器的方法
     */
    async handleUploadImage(resultFiles, insertImgFn) {
      const imgUrl = await uploadImage(resultFiles[0]);
      // 上傳圖檔,傳回結果,将圖檔插入到編輯器中
      insertImgFn(imgUrl);
    },
  },

  mounted() {
    // 初始化
    this.initEditor();
  },

  beforeDestroy() {
    // 調用銷毀 API 對目前編輯器執行個體進行銷毀
    this.editor.destroy();
    this.editor = null;
  },
};
</script>


<style lang="scss">
@import './index.scss';
</style>      

自定義樣式 index.scss

// 工具欄icon
.w-e-toolbar .w-e-menu {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

// 工具欄提示文字
.w-e-menu-tooltip {
  font-size: 12px;
}

// 工具欄邊框
.w-e-toolbar {
  border: 1px solid #dcdfe6 !important;
  border-bottom: none !important;
}

// 編輯區域邊框
.w-e-text-container {
  border: 1px solid #dcdfe6 !important;
}

// 預設提示文字
.w-e-text-container .placeholder {
  font-size: 12px;
  color: #c1c5cd;
}

// 上傳按鈕
.w-e-menu .w-e-panel-container .w-e-up-img-container .w-e-up-btn {
  width: 100%;
  height: 64px;
  line-height: 64px;
  font-size: 24px;
}
      

自定義檔案上傳 upload-image.js

import axios from "axios";

/**
 * 上傳圖檔接口
 * @param {*} file
 */
async function uploadImage(file) {
  const from = new FormData();

  from.append("image", file);
  from.append("token", 'token');

  const res = await axios.request({
    url: 'uploadImageUrl',
    method: "POST",
    data: from,
  });

  //   console.log(res);
  const imgUrl = res.data;
  return imgUrl;
}

export default uploadImage;
      

元件使用

<Editor
     v-model="content"
     placeholder="内容(必填)"
     height="155"
     @change="handleContentChange"
   />      

繼續閱讀