Vue使用Tinymce富文本编辑器自定义toolbar按钮

这里我增加了收缩的按钮

 init: {
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        height: "100%",
        fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",
        font_formats:
          "微软雅黑=Microsoft YaHei;方正仿宋_GBK=方正仿宋_GBK;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei;Times New Roman=Times New Roman;",
        plugins: {
	      type: [String, Array],
	      default: "code lists image media table wordcount indent2em"
	    ,
        toolbar:  {
	      type: [String, Array],
	      default:
	        "code | lineheight | undo redo | fontsizeselect | fontselect |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | bullist numlist outdent indent indent2em| lists image media table | removeformat"
	    },
        branding: false,
        menubar: false,
        setup: editor => {
          let _this = this;
          editor.ui.registry.addButton("myCustomToolbarButton", {
            text: "收缩",
            onAction: function() {
              _this.show= !_this.show;
            }
          });
        }
      },

关键代码

这里使用 箭头函数 => 即可操作vue中属性和事件

 setup: editor => {
    let _this = this;
    editor.ui.registry.addButton("myCustomToolbarButton", {
      text: "收缩",
      onAction: function() {
        _this.show= !_this.show;
      }
    });
  }