TinyMCE工具栏配置详解

启用和停用工具栏

通过init配置项toolbar和toolbar(n)来配置工具栏是否启用的项目和显示的顺序。
同时，使用|来分割各个项。

tinymce.init({selector: '#textarea1',  // change this value according to your HTML//启用工具栏并显示如下项toolbar: 'undo redo | styleselect | bold italic | link image',
})
tinymce.init({selector: '#textarea2',  // change this value according to your HTML//禁用工具栏toolbar: false,
})
/* 启用多个工具栏 */
tinymce.init({selector: '#textarea3',  // change this value according to your HTML// 启用多个工具栏
  toolbar: ['undo redo | styleselect | bold italic | link image','alignleft aligncenter alignright',]
})
tinymce.init({selector: '#textarea4',  // change this value according to your html// 工具栏1toolbar1: 'undo redo | styleselect | bold italic | link image',// 工具栏2toolbar2: 'alignleft aligncenter alignright',
})

自定义工具按钮

上面在工具栏中插入的都是编辑器自带的工具。
这里讲一下如何插入自定义的按钮。

主要的流程是：

1. 在init的toolbar中注册自定义按钮
2. 在setup方法中使用editor.addButton()定义按钮。

tinymce.init(
    {selector: '#textarea',// 注册
    buttontoolbar: 'mybutton',
    setup: function (editor) {
        // 定义按钮，
        editor.addButton('mybutton', {
            // 按钮，名
           text:'My button',
            // 是否显示图标
           icon: false,
           //onclick事件
           onclick: function () {
                 // 这里点击后会插入一句话
                 editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;')
           }
       })
    }
})

上面是最基本的配置方法，

还有一些其他属性可以配置：

• tooltip: 就是鼠标滑过时的提示文字
• icon: 按钮的图标(这里指的是TinyMCE中自带的)
• image: 如果希望直接配置图标(可以是URL或者path)
• onclick: 点击事件
• onpostrender: 触发按钮渲染的事件(用来在合适的时机禁用按钮)
• cmd: 点击按钮时出发的编辑器事件(已经注册的)

更为深入的自定义按钮配置方法这里暂时不做说明。
可以参看TinyMCE Docs。

配置工具项

所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以，
属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。