以vue2为例二次封装编译器tinymce

（1）安装依赖

npm i tinymce@5.1.0 -S
npm i @tinymce/tinymce-vue@3.0.1 -S

（2）安装完依赖后在node_modules中找到tinymce，将skins复制到/static/tinymce下
中文包zh_CN.js在langs文件夹下

（2）封装组件-Tinymce.vue

<template>
  <div class="tinymce-editor">
    <Editor
      v-if="init"
      :id="tinymceId"
      :init="init"
      :disabled="disabled"
      v-model="editorValue"
    />
  </div>
</template>

<script>
import { domain, common } from "../utls";
import axios from "axios";
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue"; //编辑器引入
import "tinymce/themes/silver/theme"; //编辑器主题
import "tinymce/plugins/image";
import "tinymce/plugins/wordcount"; // 字数统计插件
export default {
  components: {
    Editor,
  },
  props: {
    //ID
    id: {
      type: String,
      default: "tinymceEditor",
    },
    //高度
    height: {
      type: [String, Number],
      default: 390,
    },
    //宽度
    width: {
      type: [String, Number],
      default: 745,
    },
    //内容
    value: {
      type: String,
      default: "",
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //插件
    plugins: {
      type: [String, Array],
      default: "image wordcount",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo | forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image | removeformat| formatselect fontselect fontsizeselect",
    },
  },
  data() {
    return {
      //初始化配置
      tinymceId: this.id,
      init: {
        selector: `#${this.id}`,
        language_url: `${domain.mainVueUrl}static/tinymce/langs/zh_CN.js`, //汉化路径是自定义的，一般放在public或static里面
        language: "zh_CN",
        skin_url: `${domain.mainVueUrl}static/tinymce/skins/ui/oxide`,
        content_css: `${domain.mainVueUrl}static/tinymce/skins/content/default/content.css`,
        plugins: this.plugins, //插件
        //工具栏
        menubar: false, //隐藏菜单栏
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,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;",
        fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 36px",
        toolbar: this.toolbar, //字体大小
        max_height: this.height, //高度
        min_height: this.height,
        width: this.width,
        convert_urls: false,
        placeholder: "在这里输入文字",
        branding: false, //隐藏右下角技术支持
        forced_root_block: "",
        images_upload_handler: (blobInfo, success, failure) => {
          const isAccord =
            blobInfo.blob().type === "image/jpeg" ||
            blobInfo.blob().type === "image/png" ||
            blobInfo.blob().type === "image/GIF" ||
            blobInfo.blob().type === "image/jpg"
          if (blobInfo.blob().size / 1024 / 1024 > 20) {
            failure("上传失败，图片大小请控制在 20M 以内!");
          } else if (!isAccord) {
            failure("图片格式错误!");
          } else {
          	//上传图片处理函数
            this.handleUpload(blobInfo, success, failure);
          }
        },
      },
    };
  },
  mounted() {
    tinymce.init({});
  },
  computed: {
    editorValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update:value", val);
      },
    },
  },
  methods: {
  	//上传图片处理函数
    handleUpload(blobInfo, success, failure) {
      let url = "/common/uploadImage";
      let formData = new FormData();
      // 服务端接收文件的参数名，文件数据，文件名
      formData.append("file", blobInfo.blob(), blobInfo.filename());
      axios({
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          token: localStorage.userToken
        },
        withCredentials: true,
        // 这里是你的上传地址
        url: domain.Base_M1_URL + "/common/uploadImage",
        data: formData,
      }).then((res) => {
        if(res.code == 200) {
          success(domain.Base_M1_URL + res.data);
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        console.log(err);
      })
    },
  },
};
</script>

（3）使用封装组件

<template>
	<my-editor
            id="tinymceId"
            ref="tinymceRef"
            :width="600"
            :height="300"
            :value.sync="projectFrom.content"
          />
</template>
<script>
import myEditor from "@/components/tinymce.vue";
export default {
	components: { myEdito },
}
</script>