tinymce在vue中的使用

tinymce在vue中的使用
1.下载插件

npm i @tinymce/tinymce-vue@3.2.8

 npm i tinymce@4.8.4

2.找个目录新建文件夹tinymce,把node_modules/tinymce里的文件复制到新建文件夹里

lang是我下载的语言包,tinymce 默认是英文界面，所以还需要下载一个中文语言包
3.初始化引入

import edit from "@tinymce/tinymce-vue";
import "./tinymce.min.js";
import "./themes/silver/theme.min.js";
import "./langs/zh_CN";
import "./icons/default/icons.min.js";

tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用

<edit :init="init" v-model="data" id="tinymce" ></edit>

init是编辑器的一些初始化配置，我是在return里定义的

init: {
        language: "zh_CN",
        height: 600,
        menubar: "false", //菜单栏
        branding: false, //禁用右下角标识字符串
        paste_retain_style_properties: "all", //粘贴保留所有格式
        paste_data_images: true, // 允许粘贴图像，图片粘贴自动上传需要
        // 图片上传回调函数
        images_upload_handler: this.imagesUploadHandler,
        plugins: this.plugins,
        toolbar: this.toolbar
      }

4.扩展插件
tinymce 通过添加插件 plugins 的方式来添加功能,比如
plugins："fullscreen"，
进行引入import "./plugins/fullscreen/plugin.min.js";
添加了插件之后，工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义，toolbar:"fullscreen"
以下是完整的组件代码：

<template>
    <edit :init="init" v-model="data" id="tinymce" ></edit>
</template>
<script>
import edit from "@tinymce/tinymce-vue";
import "./tinymce.min.js";
import "./themes/silver/theme.min.js";
import "./langs/zh_CN";
import "./icons/default/icons.min.js";

//引入插件
import "./plugins/link/plugin.min.js";
import "./plugins/code/plugin.min.js";
import "./plugins/image/plugin.min.js"; //图片上传需要
import "./plugins/paste/plugin.min.js"; //图片粘贴自动上传需要
import "./plugins/media/plugin.min.js";
import "./plugins/table/plugin.min.js";
import "./plugins/lists/plugin.min.js";
import "./plugins/contextmenu/plugin.min.js";
import "./plugins/wordcount/plugin.min.js";
import "./plugins/textcolor/plugin.min.js";
import "./plugins/fullscreen/plugin.min.js"; //全屏
import "./plugins/searchreplace/plugin.min.js";
import "./plugins/emoticons/plugin.min";

export default {
  name: "EditorTinymce",
  components: {
    edit
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
   plugins: {
      type: [String, Array],
      default:  'link lists image code table textcolor wordcount contextmenu paste media fullscreen searchreplace '
    },
    toolbar: {
      type: [String, Array],
      default:  'undo redo |fontsizeselect  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat |　paste | code | fullscreen | searchreplace '
    },
  },
  data() {
    return {
      data: this.content, //文本数据
      init: {
        language: "zh_CN",
        height: 600,
        menubar: "false", //菜单栏
        branding: false, //禁用右下角标识字符串
        paste_retain_style_properties: "all", //粘贴保留所有格式
        paste_data_images: true, // 允许粘贴图像，图片粘贴自动上传需要
        // 图片上传回调函数
        images_upload_handler: this.imagesUploadHandler,
        plugins: this.plugins,
        toolbar: this.toolbar
      }
    };
  },

  beforeDestroy() {
    // 销毁tinymce
    this.$emit("on-destroy");
    window.tinymce.remove(document.getElementById("tinymce"));
  },
  methods: {
    setContent(val) {
      this.data = val;
    },
    getContent() {
      return this.data;
    },
    imagesUploadHandler(blobInfo, success, failure, progress) {
      console.log("图片上传");
      var xhr, formData;
      var file = blobInfo.blob(); //转化为易于理解的file对象
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;

      xhr.open("POST", "your imgUrl");
      xhr.setRequestHeader("Authorization", "token");

      xhr.onload = function() {
        var json = JSON.parse(xhr.responseText);
        console.log(json);

        if (json.code != 200) {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(json.url);
          return;
        }
        success(json.url);
      };

      formData = new FormData();
      formData.append("file", file, file.name);
      xhr.send(formData);
    }
  }
};
</script>
<style scoped>
@import url("skins/ui/oxide/skin.min.css");
</style>

这样一个tinymce编辑器就出来啦