tinymce 富文本编辑以及图片上传功能

<template>
  <textarea :id="tinymceId" style="visibility: hidden"> </textarea>
</template>

<script>
import loadTinymce from "@/utils/loadTinymce";
import { plugins, toolbar } from "./config";
import { debounce } from "throttle-debounce";
import { baseUrl } from "@/config/env";
let num = 1;

export default {
  props: {
    id: {
      type: String,
      default: () => {
        num === 10000 && (num = 1);
        return `tinymce${+new Date()}${num++}`;
      },
    },
    value: {
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    menubar: {
      // 菜单栏
      type: String,
      default: "file edit insert view format table",
    },
    toolbar: {
      // 工具栏
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
    height: {
      type: Number,
      required: false,
      default: 360,
    },
  },
  data() {
    return {
      tinymceId: this.id,
      upload_action: baseUrl + "/upload",
      conf: {
        selector: `#${this.tinymceId}`,
        language: "zh_CN",
        skin_url: "/util/tinymce-skins/ui/oxide/",
        menubar: "file edit insert view format table",
        plugins,
        toolbar,
        height: this.height,
        branding: false,
        object_resizing: false,
        end_container_on_empty_block: true,
        powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        default_link_target: "_blank",
        link_title: false,
        nonbreaking_force_tab: true,
        paste_data_images: true,
        relative_urls: true,
        convert_urls: true,
        remove_script_host: false,
        // images_upload_url: self.upload_action,
        automatic_uploads: true, //是否开启自定义
        // images_upload_base_path: { FileUrl: "/annexes-files" },
      },
    };
  },
  components: {},
  mounted() {
    //设置上传的目录文件夹
    loadTinymce((tinymce) => {
      require("./zh_CN");
      //回调初始化tinymce
      this.init();
    });
  },
  destroyed() {
    this.destroyTinymce();
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || "")
        );
      }
    },
    language() {
      this.destroyTinymce();
      this.$nextTick(() => this.initTinymce());
    },
  },
  methods: {
    vModel(editor) {
      // 控制连续写入时setContent的触发频率
      const debounceSetContent = debounce(250, editor.setContent);
      this.$watch("value", (val, prevVal) => {
        if (editor && val !== prevVal && val !== editor.getContent()) {
          if (typeof val !== "string") val = val.toString();
          debounceSetContent.call(editor, val);
        }
      });

      editor.on("change keyup undo redo", () => {
        this.$emit("input", editor.getContent());
      });
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    destroyTinymce() {
      if (!window.tinymce) return;
      const tinymce = window.tinymce.get(this.tinymceId);
      if (tinymce) {
        tinymce.destroy();
      }
    },
    init() {
      const self = this;
      window.tinymce.init({
        // 默认配置
        ...this.conf,
        // 图片上传
        images_upload_handler: function (blobInfo, success, failure) {
          let formData = new FormData();
          formData.append("file", blobInfo.blob());
          self.$axios.post(baseUrl + "/upload", formData).then((response) => {
            console.log(response.data.data.FileUrl);
            success("" + baseUrl + response.data.data.FileUrl);
          });
        },
        init_instance_callback: (editor) => {
          if (this.value) {
            editor.setContent(this.value);
          }
          this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$emit("input", editor.getContent());
          });
        },
        setup: (editor) => {
          //如果不是修改编辑就禁用
          if (!this.isEdit) {
            editor.settings.readonly = true;
          }
        },
        // 挂载的DOM对象
        selector: `#${this.tinymceId}`,
      });
      this.conf = Object.assign(this.conf, this.$attrs);
    },
  },
};
</script>
<style scoped>
.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  /*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}
.editor-upload-btn {
  display: inline-block;
}
</style>