vue 使用editor 编辑器以及打包线上不显示问题

 <Editor
            :modelValue="fromItemData.noticeContent"
            @setContent="setContent"
            :disabled="disabledTrue"
          />

 setContent(val) {
      this.fromItemData.noticeContent = val;
      this.$refs.fromItemDataRef.validateField("noticeContent");
    },

import Editor from "@/componens/tinymce/index.vue";

 

 

 

<template>
  <div class="tinymce">
    <editor
      api-key="d56y15whil9j8gpofa44vja50wx204vp8n22pd4vomxwtc9r"
      v-model="content"
      :init="init"
      :disabled="disabled"
    />
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import plugins from "./plugins";
import toolbar from "./toolbar";
import { menu } from "./menubar";
import util from "@/libs/util";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver/theme";

import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";
import { fileUpload } from "@/api/operate";

export default {
  name: "tinymce",
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    height: {
      type: [Number, String],
      default: 380,
    },
  },
  data() {
    return {
      content: this.modelValue,
      // 初始化配置
      init: {
        language_url: "zh_CN.js", // 中文语言包路径
        language: "zh_CN",
        skin_url: "./static/tinymce/skins/ui/oxide",
        height: this.height,
        min_height: this.height,
        max_height: this.height,
        toolbar_mode: "wrap",
        plugins,
        toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        menubar: false,
        menu,
        // 此处为图片上传处理函数，这个直接用了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(failure);
        },
        file_picker_types: "media",
        file_picker_callback: (callback, value, meta) => {
          if (meta.filetype === "media") {
            const input = document.createElement("input");
            input.setAttribute("type", "file");
            const that = this; // 为 Vue 构造函数中的 this，指向 Vue 实例对象
            input.onchange = async function () {
              const file = this.files[0]; // 为 HTMLInputElement 构造函数中的 this，指向 input 实例对象
              const { url } = await that.uploadFile(file, "video");
              callback(url);
            };

            input.click();
          }
        },
        video_template_callback: (data) => {
          return `<video width="745" height="420" controls="controls" src=${data.source} />`;
        },
      },
    };
  },
  watch: {
    modelValue: {
      handler(newV, oldV) {
        this.content = newV;
      },
      deep: true,
    },
    content: {
      handler(newV, oldV) {
        this.$emit("setContent", this.content);
      },
      deep: true,
    },
  },
  mounted() {
    tinymce.init({}); // 这里传个空对象就可以了
  },
  methods: {
    async uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);
      // 注：此为调用后端上传接口，需根据实际情况进行调整
      let url = "";
      let name = "";
      await fileUpload(formData).then((response) => {
        console.log("response", response);
        url =
          util.baseUrl +
          "/sdfs/file/download?filePath=" +
          response.data.data.filePath;
        name = response.data.data.fileName;
      });
      return {
        url: url,
        name: name,
      };
    },
  },
};
</script>

import util from '@/libs/util'

export function fileUpload(data) {
  return util.http({
    url: '/sdfs/file/uploadFile',
    method: 'post',
    data
  })
}

 

  这个一定要配置，不然打包到线上不显示

 

 static里面是