bold 加粗按钮的特点是点击后它会维持着一个选中的状态即按钮会保持着高亮，而普通的按钮是没有这个功能的。
以创建一个普通的标题插件为例
制作插件的一些基础步骤完全照抄中文文档上面的就可以了。然后再根据自身的要求再去略作修改。
tinymce.PluginManager.add('title', function(editor, url) { // 添加title 插件， title 为插件的名称
// 注册一个工具栏按钮名称, 这是一个普通的按钮
/**
editor.ui.registry.addButton('example', {
text: '标题',
onAction: function () {
// 点击事件的回调
}
});
**/
// 注册一个状态切换按钮
editor.ui.registry.addToggleButton('title', {
// text: 'title',
icon: 'title',
onAction: function (api) {
editor.execCommand('formatBlock', false, "h2");
api.setActive(api.isActive()); // 按钮点击后保持高亮状态
},
onSetup: function (api) {
editor.formatter.formatChanged("h2", function (state) {
// 光标所在的标签发生变化的时候改变按钮的高亮状态
api.setActive(state);
});
}
});
return {
getMetadata: function () {
return {
//插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
name: "Example plugin",//插件名称
url: "http://exampleplugindocsurl.com", //作者网址
};
}
};
});
addButton() 方法只能创建一个简单的工具栏按钮，不具备状态切换的功能。这时候就需要用到另一个方法 addToggleButton() ,这个方法可以在点击按钮或光标所在的标签发生变化的时候可以使相应的按钮保持高亮的状态。详细参考官方文档
editor.execCommand('formatBlock', false, "h2");
execCommand() 为一个原生方法，该方法允许运行命令来操纵可编辑内容区域的元素。具体可参考Web API 接口参考 | MDN
效果图
rx1qf-l8t57.gif
