之前用的是官方在线授权的 TinyMCE，如果想改代码不太方便。

今天重新配置了一下，采用本地托管。

使用一个大神开源的工具  packy-tang/vue-tinymce

一、安装依赖

在终端中输入命令

npm i tinymce @packy-tang/vue-tinymce

当前版本已经是 TinyMCE7 了

二、main.js 里加入下面代码

全局配置

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

三、将tinymce拷贝到public里和添加zh_CN.js

为了方便我们修改一些代码，比如

到node_modules目录下找到tinymce文件夹，复制到public目录下

如上图，新建langs文件夹，里面新建 zh_CN.js 文件，代码点此

四、在 index.html 里添加

<script src="/tinymce/tinymce.min.js"></script>

五、封装编辑器组件

新建组件 tinymceEditor.vue

<template>
  <div>
    <vue-tinymce  :key="tinymceFlag" v-model="Editortext" :setting="setting"   @change="change"  :setup="setting.setup" />
  </div>
</template>
<script>

export default {
  name: "tinymce",
  props: {
    content: {//父组件传进来的默认值
      type: String,
      default: "",
    },
    itemkey: {//多个富文本用于区分
      type: String,
      default: "",
    },
    custom: {//添加自定义菜单按钮
      type: String,
      default: "",
    },
  },
  activated() {
    this.tinymceFlag++;//组件缓存的时候用于再次加载，不然有些时候再次加载会出现只显示一个textarea的问题
  },
  data() {
    let _this = this;
    return {
      tinymceFlag: 1,
      Editortext: this.content,
      setting: {
        // toolbar_sticky: true,
        // toolbar_sticky_offset: 250,
        content_style: 'img { max-width: 80%; height: auto; }',
        toolbar_location: 'top',
        custom_ui_selector: "body", // 聚焦的元素
        language: "zh_CN",
        min_height: 400,
        max_height: 500,
        theme: "silver",
        browser_spellcheck: true, // 拼写检查
        branding: true, // 去水印
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 显示最上方menu
        fontsize_formats: "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px",
        toolbar: "blocks  fontsize  forecolor backcolor bold italic underline strikethrough link   blockquote  subscript superscript removeformat media charmap emoticons hr pagebreak insertdatetime print preview " +
            "|  table image bullist numlist alignleft aligncenter alignright alignjustify  outdent indent pastetext code",
        toolbar_mode: "wrap", // 工具栏模式
        plugins: "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize ",
        paste_webkit_styles: true,
        images_upload_url: '/api/upload/file/tinymce?accessToken='+this.getStore("accessToken"), //  图片上传地址
        contextmenu: `inserttable | cell row column deletetable`,
        relative_urls: false,
        remove_script_host: false,
        init_instance_callback: (editor) => {
          editor.focus(); // 初始化聚焦，让内联模式的编辑器工具显示
        },
        setup: function (editor) {
          editor.on("input blur undo redo execCommand", (e) => {//多个触发事件获取最新值
            var msg = _this.Editortext.toString();//获取带html的值
            if (_this.itemkey != undefined && _this.itemkey != "") {
              //多个富文本时返回值给父组件
              _this.$emit("message", {
                key: _this.itemkey,
                msg: msg,
              });
            } else {
              //单个富文本返回值给父组件
              _this.$emit("message", msg);
            }
          });
          //添加自定义的菜单按钮
          if (_this.custom.indexOf("menuDateButton") != -1) {
            editor.ui.registry.addMenuButton("menuDateButton", {//添加菜单按钮
              text: "公式模板",
              fetch: function (callback) {
                var items = [];
                let formula=[{name:'公式1',code:'1'},{name:'公式2',code:'2'},{name:'公式3',code:'3'},]
                formula.map((resitem) => {
                  items.push({
                    type: "menuitem",
                    text: resitem.name,
                    onAction: function (_) {
                      editor.insertContent(resitem.name);
                      editor.input();
                    },
                  });
                });
                callback(items);
              },
            });
          }
        },
      }
    };
  },
  watch: {
    content: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // 这里是从列表页编辑时做的内容注入，没有需要可以不写
        if (this.content == undefined) {
          this.Editortext = "";
        } else {
          this.Editortext = this.content;
        }
      },
    },
  },
  mounted() {
  },
  methods: {
    change(editor) {

    },
  },
};
</script>

六、调用

简化下dai'ma

<template>
    <div>
          <tinymceEditor :content="content" itemkey="articleAddEditor1"  @message="editorMessage"></tinymceEditor>
    </div>
</template>

<script>

    import tinymceEditor from "@/views/my-components/sens/tinymceEditor";

    export default {
        name: "blog-article-add",
        components: {
            tinymceEditor
        },

        data() {
            return {
                content: "",
            };
        },
        methods: {
            editorMessage(content) {
              this.content = content.msg;
            },
        },
       
    };
</script>

七、效果图