使用Ts書寫的vue2項目如何使用tinymce富文本編輯器掂僵，一起來看看吧

1.安裝tinymce

npm install tinymce -S    /     yarn add tinymce

2.安裝@tinymce/tinymce-vue

npm install @tinymce/tinymce-vue@3.2.8 -S    /    yarn add @tinymce/tinymce-vue@3.2.8

默認(rèn)安裝tinymce-vue最新版本是4.0签夭，已經(jīng)用的vue3.0的了，所以要使用之前版本
3.在 node_modules 中找到 tinymce/skins 目錄演侯，然后將 skins 目錄拷貝到 public目錄下
4.tinymce 默認(rèn)是英文界面，所以還需要下載一個中文包背亥，復(fù)制到 public/tinymce目錄下

示例.png

<template>
  <div>
    <Editor :id="id" v-model="content" :init="init"></Editor>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import { uploadOssFile } from "@/api/public";
import { completeImg } from "@/utils/index";
import "tinymce/themes/silver/theme";
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 "tinymce/plugins/media";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/paste";
import "tinymce/plugins/codesample";
// import "tinymce/plugins/emoticons"
import "tinymce/icons/default/icons";

console.log(tinymce);

@Component({ name: "TinymceEditer", components: { Editor } })
export default class extends Vue {
  //設(shè)置prop id
  @Prop({ default: "vue-tinymce-" + +new Date() }) id!: string;

  //默認(rèn)高度
  @Prop({ default: 300 }) height!: number;

  @Prop({ default: "" })
  private value!: string;

  private content: string = "";

  @Watch("value")
  private onChangeValue(newVal: string) {
    this.content = newVal;
  }

  @Watch("content")
  private onChangeContent(newVal: string) {
    this.$emit("input", newVal);
  }

  //富文本框init配置
  init = {
    selector: "#" + this.id, //富文本編輯器的id
    language: "zh_CN", //語言
    language_url: "/tinymce/zh_CN.js", //語言包
    skin_url: "/tinymce/skins/ui/oxide", //編輯器需要一個skin才能正常工作秒际，所以要設(shè)置一個skin_url指向之前復(fù)制出來的skin文件
    menubar: "file edit insert view format table tools import", //菜單條
    plugins:
      "link lists image code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste codesample", //插件
    toolbar:
      "bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak codesample | code fullscreen preview", //工具條
    font_formats:
      "Arial=arial,helvetica,sans-serif;宋體=SimSun;微軟雅黑=Microsoft Yahei;Impact=impact,chicago;", //字體
    fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小
    height: this.height, //高度
    branding: false, //水印
    elementpath: false, //底部元素路徑
    paste_data_images: true, //允許粘貼圖片
    file_picker_types: "media",
    //初始化前執(zhí)行
    setup: (editor: any) => {},
    //實例化執(zhí)行
    init_instance_callback: (editor: any) => {
      this.content && editor.setContent(this.content);
      //this.hasInit = true
      editor.on("NodeChange Change KeyUp SetContent", () => {
        //this.hasChange = true
        this.content = editor.getContent();
      });
    },

    //選擇文件
    file_picker_callback: (callback, value, meta) => {
      if (meta.filetype == "media") {
        let input = document.createElement("input"); //創(chuàng)建一個隱藏的input
        input.setAttribute("type", "file");
        // let that = this;
        input.onchange = (res) => {
          let formdata = new FormData();
          if (input.files[0].size > 10 * 1024 * 1024) {
            this.$message("視頻不能超過10M");
            return false;
          }
          formdata.set("file", input.files[0]);
          uploadOssFile(formdata).then((res) => {
            console.log(res);
            let { data, status } = res.data as any;
            if (status == "1") {
              let url = completeImg(data);
              callback(url);
            }
          });
        };
        //觸發(fā)點擊
        input.click();
      }
    },

    //上傳圖片回調(diào)
    images_upload_handler: (
      blobInfo: any,
      success: Function,
      failure: Function
    ) => {
      this.handleImgUpload(blobInfo, success, failure);
    },
  };

  private mounted() {
    this.content = this.value;
  }

  //上傳圖片
  private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
    let formdata = new FormData();
    var file = blobInfo.blob();
    if (!file.name) {
      const suffix =
        file.type == "image/png"
          ? "png"
          : file.type == "image/gif"
          ? "gif"
          : "jpg";
      file = new File([file], `test.${suffix}`);
    }
    if (file.size > 5 * 1024 * 1024) {
      this.$message("圖片不能超過5M");
      return false;
    }
    formdata.set("file", file);
    uploadOssFile(formdata)
      .then((res) => {
        console.log(res);
        let { data, status } = res.data as any;
        if (status == "1") {
          let url = completeImg(data);
          success(url);
        } else {
          failure("error");
        }
      })
      .catch((err) => {
        failure("error");
      });
  }
}
</script>

6.頁面使用

<MyTinymce v-model="formData.content" ref="tinymce" />

7.實現(xiàn)效果

image.png