在ts/vue2中使用tinymce富文本编辑器

使用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

默认安装tinymce-vue最新版本是4.0，已经用的vue3.0的了，所以要使用之前版本
3.在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public目录下
4.tinymce 默认是英文界面，所以还需要下载一个中文包，复制到 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 {
  //设置prop id
  @Prop({ default: "vue-tinymce-" + +new Date() }) id!: string;

  //默认高度
  @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才能正常工作，所以要设置一个skin_url指向之前复制出来的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",
    //初始化前执行
    setup: (editor: any) => {},
    //实例化执行
    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"); //创建一个隐藏的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);
            }
          });
        };
        //触发点击
        input.click();
      }
    },

    //上传图片回调
    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.实现效果

image.png