vue + vue-tinymce 富文本编辑器

 第一步：npm 
npm install tinymce -S
npm install @tinymce/tinymce-vue -S

第二步：把node_modules中的tinymce复制到static中。

第三步：mian.js

// 富文本编辑器
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
//样式
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/skins/ui/oxide/content.css'
//主题
import 'tinymce/themes/silver/index'
// 扩展插件

//--------------------插入引入--------------------
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu'  //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor'  //文本颜色插件
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help'       
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/toc'
// 引入中文包，本地化
import '../static/tinymce/langs/zh_CN.js'
Vue.prototype.$tinymce = tinymce;
Vue.use(VueTinymce);

第四步： 创建一个富文本组件。

<template>
  <div class="tinymce">
    <vue-tinymce :setting="other_options" v-model="value"></vue-tinymce>
  </div>
</template>

<script>
import "tinymce/skins/ui/oxide/skin.css";
import "../../../static/tinymce/icons/default/icons";
export default {
  props: {
    offerContents: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      tinymceId: "tinymce",
      value: "",
      other_options: {
        height: "30rem",
        menubar: true,
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        letterspacing_formats: "0px 2px 4px 6px 24px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,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;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar:
          "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        // plugins:
        //   "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs importword kityformula-editor letterspacing",
        elementpath: false, // 隐藏底栏的元素路径
        branding: false, // 隐藏右下角技术支持
        contextmenu: false, // 禁用富文本的右键菜单，使用浏览器自带的右键菜单
        toolbar:
          "undo redo | bold italic underline strikethrough | formatselect alignleft 			aligncenter alignright alignjustify | link unlink | numlist bullist |   fontselect fontsizeselect forecolor backcolor  | indent outdent | superscript subscript | removeformat  ",
        toolbar_drawer: "sliding",
        language: "zh_CN",
        language_url: '../../../static/tinymce/langs/zh_CN.js',
        skin_url: '/tinymce/skins/ui/oxide',// skin路径
        branding: false,
      },
    };
  },
  mounted() {
    tinymce.init({})
  },
  created() {
    // this.$nextTick(() =>
    //   window.tinymce.get(this.tinymceId).setContent(this.offerContents)
    // );
  },
  watch: {
    value(newValue) {
      this.$emit("MailContent", newValue);
    },
    offerContents(newValue) {
      this.value = newValue;
    },
  },
  methods: {
    setContent(value = "") {
      window.tinymce.get("tinymce").setContent(value);
    },
  },
};
</script>

第五步：页面引用组件

<Tinymce :offerContents="offerContent" @MailContent="getMailContent" />

import Tinymce from "@/pages/components/tinymce.vue";

data() {

  return {
    offerContent: "",
  }
}
 methods: {
     getMailContent(arr) {
       this.offerContent = arr; //取回富文本的值
    },
}