bold 加粗按鈕的特點(diǎn)是點(diǎn)擊后它會(huì)維持著一個(gè)選中的狀態(tài)即按鈕會(huì)保持著高亮鞠眉，而普通的按鈕是沒有這個(gè)功能的鸠姨。
以創(chuàng)建一個(gè)普通的標(biāo)題插件為例
制作插件的一些基礎(chǔ)步驟完全照抄中文文檔上面的就可以了浊伙。然后再根據(jù)自身的要求再去略作修改。
tinymce.PluginManager.add('title', function(editor, url) { // 添加title 插件晌缘， title 為插件的名稱
// 注冊(cè)一個(gè)工具欄按鈕名稱, 這是一個(gè)普通的按鈕
/**
editor.ui.registry.addButton('example', {
text: '標(biāo)題',
onAction: function () {
// 點(diǎn)擊事件的回調(diào)
}
});
**/
// 注冊(cè)一個(gè)狀態(tài)切換按鈕
editor.ui.registry.addToggleButton('title', {
// text: 'title',
icon: 'title',
onAction: function (api) {
editor.execCommand('formatBlock', false, "h2");
api.setActive(api.isActive()); // 按鈕點(diǎn)擊后保持高亮狀態(tài)
},
onSetup: function (api) {
editor.formatter.formatChanged("h2", function (state) {
// 光標(biāo)所在的標(biāo)簽發(fā)生變化的時(shí)候改變按鈕的高亮狀態(tài)
api.setActive(state);
});
}
});
return {
getMetadata: function () {
return {
//插件名和鏈接會(huì)顯示在“幫助”→“插件”→“已安裝的插件”中
name: "Example plugin",//插件名稱
url: "http://exampleplugindocsurl.com", //作者網(wǎng)址
};
}
};
});
addButton() 方法只能創(chuàng)建一個(gè)簡(jiǎn)單的工具欄按鈕，不具備狀態(tài)切換的功能痢站。這時(shí)候就需要用到另一個(gè)方法 addToggleButton() ,這個(gè)方法可以在點(diǎn)擊按鈕或光標(biāo)所在的標(biāo)簽發(fā)生變化的時(shí)候可以使相應(yīng)的按鈕保持高亮的狀態(tài)磷箕。詳細(xì)參考官方文檔
editor.execCommand('formatBlock', false, "h2");
execCommand() 為一個(gè)原生方法，該方法允許運(yùn)行命令來操縱可編輯內(nèi)容區(qū)域的元素阵难。具體可參考Web API 接口參考 | MDN
效果圖
rx1qf-l8t57.gif
