wangEditor富文本自定義上傳圖檔

vue項目 wangEditor富文本自定義上傳圖檔

在項目中遇到使用帶上傳圖檔功能的富文本需求,圖檔先上傳到伺服器中,上傳時需要使用項目中發起請求的配置,在請求頭中攜帶身份驗證,是以上傳圖檔使用了wangEditor的自定義上傳圖檔事件,在這個事件中可以完全自己控制圖檔上傳的過程;因為多次使用,是以我直接封裝成了一個子元件;

wangEditor富文本編輯器是基于javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費的富文本插件,步驟代碼如下

1.安裝

npm install wangeditor --save
           

2.封裝的wangEditor子元件

<template>
  <div>
    <div ref="editorElem" ></div>
  </div>
</template>
<script>
import E from 'wangeditor';
import axios from 'axios';
export default {
  name: 'Editor',
  data() {
    return {
      editor: null,
      editorContent: '',
    };
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    // 編輯器的事件，每次改變會擷取其html内容
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
      this.catchData(this.editorContent); // 把這個html通過catchData的方法傳入父元件
    };
    // 上傳圖檔
    this.editor.customConfig.withCredentials = true;
    // 自定義上傳圖檔方法
    this.editor.customConfig.customUploadImg = (file, insert) => {
    // files 是 input 中選中的檔案清單
    // insert 是擷取圖檔 url 後，插入到編輯器的方法
      let param = new FormData(); // 建立form對象
      param.append('files', file[0]);
      const url = '/upload'; // url是上傳圖檔的路徑
      // 一般項目中都會封裝好發送請求得方法,我這為了通用直接用axios
      axios.post(url, param).then(res => {
       // res是上傳成功後傳回的資料,傳回的資料中需要有上傳圖檔的路徑,
       // 通過insert方法将路徑傳入,即可将圖檔在富文本中插入
        if (res.code === 200) {
        // 我這傳回的是JSON資料,需要解析
          const data = JSON.parse(res.data);
          const imgUrl = data[0].src; // 上傳後的圖檔路徑
          // 上傳代碼傳回結果之後，将圖檔插入到編輯器中
          insert(imgUrl);
        }
      });
    };
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 圖檔的大小
    this.editor.customConfig.uploadImgMaxLength = 5; // 上傳圖檔的個數
    this.editor.customConfig.uploadImgShowBase64 = true;
    this.editor.customConfig.uploadFileName = 'myFileName';
    this.editor.customConfig.menus = [
      // 菜單配置
      'head', // 标題
      'bold', // 粗體
      'fontSize', // 字号
      'fontName', // 字型
      'italic', // 斜體
      'underline', // 下劃線
      'strikeThrough', // 删除線
      'foreColor', // 文字顔色
      'backColor', // 背景顔色
      'link', // 插傳入連結接
      'list', // 清單
      'justify', // 對齊方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入圖檔
      'table', // 表格
      'code', // 插入代碼
      'undo', // 撤銷
      'redo', // 重複
    ];
    this.editor.create(); // 建立富文本執行個體
  },
  methods: {
    // 擷取到富文本中的值
    catchData(data) {
      this.$emit('editorData', data);
    },
  },
};
</script>
<style>
</style>
           

3.在父元件中導入與接收值

<template>
  <editorBar @editorData="getEditorData"></editorBar>
</template>
<script>
import editorBar from '../../components/wangEditor/wangEditor';
export default {
   components: {
    editorBar,
  },
  methods:{
      // 擷取富文本子元件傳來的資料
    getEditorData(data) {
      this.reportForm.reportContent = data;
    },
  }
}
</script>
           

4.最後的效果

5.自定義上傳說明

我這使用自定義上傳是因為需要使用項目中的axios配置,适配生産環境開發環境攜帶身份驗證資訊等;如果不需要使用配置,直接用

editor.customConfig.uploadImgServer

方法即可;

// 配置伺服器端位址
    editor.customConfig.uploadImgServer = '/upload'