vue-cli3 与 vue-cli2使用 Tinymce富文本编辑器的异同

前提

先安装依赖包

npm install tinymce @tinymce/tinymce-vue -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

注意： 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理

tinymce 默认是英文界面，所以还需要下载一个中文语言包

然后将这个语言包放到 static 目录下，为了结构清晰，我包了一层 tinymce 目录

这个是vue-cli2项目的的放法

这个是vue-cli3项目的的放法

引用-代码

<template>
  <div class="editor">
    <editor id="tinymce" v-model="html" :init="editorInit"></editor>
  </div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
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 { baseUrl } from "../utils/env";
import { uploadFile } from "../api/user";
//vue-cli 3.x 需要在这引入中文包
import "../../public/tinymce/langs/zh_CN.js";
export default {
  props: ["tinymceHtml"],
  data() {
    return {
      file: null,
      html: "",
      hasInit: false,
      hasChange: false,
      editorInit: {
        // language_url: "../../public/tinymce/langs/zh_CN.js", //  vue-cli 2.x 在这引入中文包
        language: "zh_CN",
        skin_url: "tinymce/skins/ui/oxide", // vue-cli 3.x的样式引入写法
        skin_url: "../../static/tinymce/skins/ui/oxide", // vue-cli 2.x的样式引入写法
        height: 300,
        branding: false,
        file_picker_types: "file image",
        file_picker_callback: uploadImg,
        images_upload_url: baseUrl + "/api/Upload/UploadFile",
        //上传图片回调
        images_upload_handler: (blobInfo, success, failure) => {
          let fd = new FormData();
          fd.append("file", blobInfo.blob());
       
        },
        init_instance_callback: editor => {
          if (this.tinymceHtml) {
            this.html = this.tinymceHtml;
            editor.setContent(this.tinymceHtml);
          }
          this.hasInit = true;
          editor.on("NodeChange Change input KeyUp", () => {
            //change触发watch去setContent，光标变化了，
            this.hasChange = true;
            this.$emit("input", editor.getContent({ format: "raw" }));
          });
        },
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | image | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat"
      }
    };
  }
};
</script>