在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本

1.安装 

npm install tinymce -S

npm install @packy-tang/vue-tinymce

2.把node_modules\tinymce里面的tinymce文件夹复制到public文件夹下面，并在html中引入tinymce.min.js，如下图

 3.在mian.js中引入@packy-tang/vue-tinymce

 4.封装组件代码

<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: {
        menubar: false,//上面的菜单隐藏
        selector: `#Editor${_this.itemkey}`,//多个富文本的时候加上itemkey用于区分
        toolbar: `insertfile undo redo 
          | charmap bold italic underline strikethrough subscript  superscript 
          | fontsizeselect
          | inserttable table tableprops deletetable cell row
          | alignleft aligncenter alignright alignjustify 
          | bullist numlist outdent indent 
          | ${_this.custom} image 
          `,
        plugins: "table charmap  preview image  ",
        language: "zh_CN", //本地化设置
        statusbar: false,//隐藏最底部的状态栏
        height: 500,//默认高度
         image_advtab: true,
        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);
              },
            });
          }
        },
        // 图片异步上传处理函数
        images_upload_handler: (blobInfo, success, failure) => {
          //本地base64图片
            var reader=new FileReader();
            reader.onload=function(e){
                //reader.result就是转换成的base64
                success(reader.result)
            }  
            reader.readAsDataURL(blobInfo.blob())
            //把图片上传到服务器
            // var formData = new FormData();
            // formData.append('images',blobInfo.blob(), blobInfo.filename());
            // // _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数
            // _this.$api.uploadScenicFace(formData, _this.token, function(data) {
            //     // 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了
            //     success(data.url);
            // });
        },
      },
    };
  },
  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>

5.调用代码

<template>
  <div >
        <VueTinymceUeditor :content="'editor1'" itemkey="editor1" custom='menuDateButton' @message="message"></VueTinymceUeditor>
        <VueTinymceUeditor :content="'editor2'" itemkey="editor2" custom='menuDateButton' @message="message"></VueTinymceUeditor>
  </div>
</template>

<script>
import VueTinymceUeditor from "@/components/VueTinymceUeditor/index.vue"
export default {
  name: 'App',
  components: {
   VueTinymceUeditor
  },
  methods: {
    message(content) {
      console.log(content)
    }
  },
}
</script>

<style>
</style>

更多功能配置可以到官方网站上进行查看tinymce | Docs | TinyMCE

中文文档：TinyMCE中文文档中文手册

我的另外一种使用方法链接：在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片_vip.khan的博客-CSDN博客_tinymce富文本