Vue配置TinyMCE富文本編輯器本地圖檔上傳伺服器

重要代碼

data（）{
	return{
		 init: {
			 ............等等等
	        // 圖檔本地上傳方法  點選上傳後執行的事件
	        images_upload_handler: (blobInfo, success, failure) => {
	          	this.handleImgUpload(blobInfo, success, failure);
	        },
      },
	}
}
methods: {
	  // 上傳本地 圖檔執行事件
    handleImgUpload(blobInfo, success, failure) {
	      let formdata = new FormData();
	      formdata.append("articleCover", blobInfo.blob());			//圖檔
	      formdata.append("fileName", blobInfo.blob().name);		//圖檔名
	      // axios 定義上傳方法
	      						//背景人員讓我傳圖檔和圖檔名
	      this.$axios({
	        method: "post", 
	        url: "Articlemessage/upLoadImg",
	        headers: {
	          "Content-Type": "multipart/form-data",
	        },
	        data: formdata, 	// 請求資料formdata
	      }).then((res) => {
	        console.log("res.data", res.data);
	        //res.data傳回結果看圖檔
	        
	        ![在這裡插入圖檔描述](https://img-blog.csdnimg.cn/5e97711f70904e8ebb928cc0ec755141.png)
	        
	        if (res.data.status != 200) {
	          // 上傳失敗執行此方法，将失敗資訊填入參數中
	          failure("HTTP Error: ");
	          return;
	        }
	        // 上傳成功之後，将對應完整的圖檔路徑拼接在success的參數中
	        //本項目res.data.data為伺服器的圖檔位址   類似https：//xxxx/xxx.png
	        success(res.data.data);
	      });
    },
}
           

全部代碼

<template>
  <div class="tinymce-box">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @click="onClick"
    >
    </editor>
  </div>
</template>

<script>
// 文檔 http://tinymce.ax-z.cn/
// 引入元件
import tinymce from "tinymce/tinymce"; // tinymce預設hidden，不引入不顯示
import Editor from "@tinymce/tinymce-vue";

// 引入富文本編輯器主題的js和css
import "tinymce/skins/content/default/content.css";

import "tinymce/skins/ui/oxide/skin.min.css";
import "tinymce/skins/ui/oxide/content.min.css";

import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons"; // 解決了icons.js 報錯Unexpected token '<'

// 編輯器插件plugins
// 更多插件參考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上傳圖檔插件
import "tinymce/plugins/media"; // 插入視訊插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 清單插件
import "tinymce/plugins/wordcount"; // 字數統計插件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/help";
export default {
  components: {
    Editor,
  },
  name: "Tinymce",
  props: {
    // 預設的富文本内容
    value: {
      type: String,
      default: "",
    },
    // 基本路徑，預設為空根目錄，如果你的項目釋出後的位址為目錄形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然釋出後資源會找不到
    baseUrl: {
      type: String,
      default: window.location.origin ? window.location.origin : "",
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "link lists image code table wordcount media preview fullscreen help",
    },
    toolbar: {
      type: [String, Array],
      default:
        "bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table image media | removeformat | fullscreen preview",
    },
  },
  data() {
    return {
      init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        // skin_url: "/static/tinymce/skins/ui/oxide",
        skin_url: "/static/tinymce/skins/ui/oxide-dark", // 暗色系
        convert_urls: false,
        height: 300,
        // （指定需加載的插件）
        plugins: this.plugins,
        toolbar: this.toolbar, // （自定義工具欄）
        statusbar: true, // 底部的狀态欄
        menubar: "file edit insert view format table tools help", // （1級菜單）最上方的菜單
        branding: false, // （隐藏右下角技術支援）水印“Powered by TinyMCE”
        // 此處為圖檔上傳處理函數，這個直接用了base64的圖檔形式上傳圖檔，
        // 如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler

        // images_upload_handler: (blobInfo, success, failure) => {
        //   const img = "data:image/jpeg;base64," + blobInfo.base64();
        //   success(img);
        //   console.log("images_upload_handler", failure);
        // },
        // 圖檔本地上傳方法  點選上傳後執行的事件
        images_upload_handler: (blobInfo, success, failure) => {
          this.handleImgUpload(blobInfo, success, failure);
        },
      },
      myValue: this.value,
    };
  },
  mounted() {
    // console.log("windowwindowwindowwindow", window);
    tinymce.init({});
  },
  methods: {
    // 上傳本地 圖檔執行事件
    handleImgUpload(blobInfo, success, failure) {
      let formdata = new FormData();
      // append 方法中的第一個參數就是 我們要上傳檔案 在背景接收的檔案名
      // 這個值要根據背景來定義
      // 第二個參數是我們上傳的檔案
      formdata.append("articleCover", blobInfo.blob());
      formdata.append("fileName", blobInfo.blob().name);
      // console.log("123", this.picUrl);
      // axios 定義上傳方法
      this.$axios({
        method: "post", // post方法
        url: "Articlemessage/upLoadImg", // 請求上傳圖檔伺服器的路徑
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formdata, // 請求資料formdata
      }).then((res) => {
        console.log("res.data", res.data);
        if (res.data.status != 200) {
          // 上傳失敗執行此方法，将失敗資訊填入參數中
          failure("HTTP Error: ");
          return;
        }

        // 上傳成功之後，将對應完整的圖檔路徑拼接在success的參數中
        success(res.data.data);
      });
    },
    // 需要什麼事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
      console.log("123123eeeeee", e);
      console.log("123123tinymce", tinymce);
    },
    // 可以添加一些自己的自定義事件，如清空内容
    clear() {
      this.myValue = "";
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
};
</script>
<style scoped>
</style>

           

我是借鑒這哥們的思路：

https://blog.csdn.net/clli_Chain/article/details/107778680

Vue配置TinyMCE富文本編輯器 + 圖檔（本地）上傳到伺服器