vue3+vite2+tinymce5+echarts5

1.下载 tinymce完整包放到public目录
2.下载中文语言包到tinymce/langs里

3. await load("/tinymce/tinymce.min.js")引入

@/components/Tinymce/index.vue

<template>
  <div :id="id"></div>
</template>
<script>
import { onMounted, onUnmounted } from "vue";
import dynamicLoadScript from "@/utils/loadScript.js";

export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  setup(props, { emit }) {
    const id = "tinymce-" + new Date().getTime();
    const init = () => {
      window.tinymce.init({
        selector: `#${id}`,
        // skin: "oxide-dark",
        language: "zh_CN",
        plugins: `print preview searchreplace autolink directionality visualblocks visualchars
            fullscreen image link media template code codesample table charmap hr pagebreak
            nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern
            help emoticons autosave autoresize`,
        toolbar: `code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor 
            | alignleft aligncenter alignright alignjustify outdent indent | \
            styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
            table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,

        min_height: 600,
        branding: false, // 去水印
        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;`,
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        init_instance_callback: editor => {
          if (props.value) {
            editor.setContent(props.value);
          }

          editor.on("NodeChange Change KeyUp SetContent", () => {
            emit("update:value", editor.getContent());
          });
        },
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: async (blobInfo, success, failure) => {
          console.log(blobInfo, success, failure);
          // await getSign(blobInfo.blob());
          // let formdata = new FormData();
          // for (const key in this.ossInfo) {
          //   formdata.append(key, this.ossInfo[key]);
          // }
          // formdata.append("file", blobInfo.blob());
          // $http
          //   .post("https://阿里云oss服务器.com", formdata)
          //   .then(() => {
          //     let url = `${this.ossInfo.host}/${this.ossInfo.key}`;
          //     success(url);
          //   })
          //   .catch((res) => {
          //     console.log(res);
          //     failure("error");
          //   });
        }
      });
    };
    onMounted(async () => {
      await dynamicLoadScript ("/tinymce/tinymce.min.js");
      init();
    });
    onUnmounted(() => {
      const tinymce = tinymce.get(id);
      tinymce.destroy();
    });
    return { id };
  }
};
</script>

@util/loadScript.js

const dynamicLoadScript = src => {
  return new Promise((resolve, reject) => {
    const existingScript = document.getElementById(src);
    if (existingScript) resolve();
    if (!existingScript) {
      const script = document.createElement("script");
      script.src = src;
      script.id = src;
      document.body.appendChild(script);
      script.onload = resolve;
      script.onerror = reject;
    }
  });
};

export default dynamicLoadScript;

使用

<template>
  <h1>page B</h1>
  <Tinymce v-model:value="content" />
</template>
<script>
import { ref } from "vue";
import Tinymce from "@/components/Tinymce/index.vue";

export default {
  components: { Tinymce },

  setup() {
    const content = ref("<p>123</p>");
    return {
      content
    };
  }
};
</script>

4.封装echarts组件
src/components/Echarts/index.vue

<template>
  <div :id="id" :style="{ width, height }"></div>
</template>

<script>
import dynamicLoadScript from "@/utils/loadScript.js";
import { onMounted, ref, watch } from "vue";
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    },
    width: {
      type: String,
      default: "600px"
    },
    height: {
      type: String,
      default: "400px"
    }
  },
  setup(props) {
    const id = "echarts-" + new Date().getTime();
    const echartInstance = ref(null);
    onMounted(async () => {
      await dynamicLoadScript("https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js");
      echartInstance.value = window.echarts.init(document.getElementById(id));
      echartInstance.value.setOption(props.options);
    });

    watch(
      () => props.options,
      options => {
        echartInstance.value.setOption(options);
      },
      {
        deep: true // 深度监听的参数
      }
    );
    return {
      id,
      echartInstance
    };
  }
};
</script>

使用src/views/PageA.vue

<template>
  <h1>page A</h1>
  <Echarts :options="options" />
  <el-button @click="add">追加数据</el-button>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
import { reactive } from "vue";
export default {
  components: { Echarts },
  setup() {
    const options = reactive({
      title: { text: "总用户量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"]
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
    const add = () => {
      options.series.push({
        name: "用户量2",
        type: "line",
        data: [15, 20, 36, 10, 10, 20]
      });
    };
    console.log("options :>> ", options.series);

    return { options, add };
  }
};
</script>