Vue使用Tinymce富文本自定义toolbar按钮的实践

目录

• 安装tinymce、tinymce ts、tinymce-vue声明文件
• 封装组件
• 组件使用
• Vue使用Tinymce富文本编辑器自定义toolbar按钮

富文本编辑器有很多，流行的有UEditor , kindeditor, CKEditor 等等。但今天我们来实现tniyMCE 的插件开发。

安装tinymce、tinymce ts、tinymce-vue声明文件

npm install tinymce -S
npm install @types/tinymce -S
npm install @tinymce/tinymce-vue -S

封装组件

组件使用

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;
      }
    });
  }

到此这篇关于Vue使用Tinymce富文本自定义toolbar按钮的实践的文章就介绍到这了,更多相关Vue Tinymce自定义toolbar 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！