tinymce自定义工具栏

tinymce自定义工具栏

话不多说直接上代码，此处添加 imgs 的工具为例

	initTinymce() {
      const _this = this
      return {
        language_url: 'https://cdn.jsdelivr.net/npm/tinymce-i18n@20.12.25/langs5/zh_CN.js',
        language: 'zh_CN',
        body_class: 'panel-body ',
        object_resizing: false,
        // 此处记得添加自定义的工具名称
        toolbar: toolbar,	// 本文使用外部引入toolbar
        //toolbar = ['formatselect | searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image imgs charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen help']
        plugins: plugins,	// 本文使用外部引入plugins
        // plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount help']
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true,
        resize: false,
        // 重点在这 ！！！！！！！
        setup(editor) {
          // 往editor工具栏添加按钮配置 （仅添加配置，是否使用不在此）
          // 第一个参数是工具名称--imgs，第二个参数是配置属性
          editor.ui.registry.addButton('imgs', {
          	// text：工具栏的显示的内容
            text: '<i class="el-icon-picture"></i>',
            // 点击图标或文字时的事件回调
            onAction: () => {
           	  // 点击事件
              _this.dialog = true	// 自定义的弹窗控制属性（仅作参考）
            }
          })
        },
      }
    },

在自己代码基础上增添 setup 方法内部的方法即可。
注：增加完按钮配置，记得在 toolbar 中添加你自定义的工具名称，否则无法在工具栏中显示。

这里只是展示了普通使用方法，具体的配置我没有做出深入研究，也许哪天突发奇想了会补充！
贴官网配置链接（https://www.tiny.cloud/docs/tinymce/6/custom-basic-toolbar-button）