TinyMCE 4切换工具栏按钮状态 [英] TinyMCE 4 toggle toolbar button state
本文介绍了TinyMCE 4切换工具栏按钮状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
切换工具栏按钮状态的最简单方法是什么(就像它与默认的粗体按钮一起使用)?我无法进入 Tinymce上的那个将按钮外观从默认更改为选中的类。这是我的插件代码(简体):
What is the simplest way to toggle the state of a toolbar button (like it works with the default bold-button)? I can't "get" to that class i Tinymce that changes the button's look from default to selected. This is my plugin code (simplified):
tinymce.PluginManager.add('myplugin', function (editor) {
editor.addButton('mybutton', {
text: false,
image: 'someimage.png',
onclick: function () {
/* Toggle this toolbar button state to selected (like with the tinymce bold-button)*/
/* and of course some other code goes here */
}
});
});
推荐答案
经过一番摆弄之后,我得出结论,onclick不会在这里做的工作。几个小时后,我最终得到了这个解决方案,该解决方案在Tinymce 4.x中可以很好地工作:
After some fiddling I concluded that the onclick won't do the job here. After hours I ended up with this solution which seams to work nicely in Tinymce 4.x:
/* In the timymce > plugins, name your pluginfolder "my_crazy_plugin" and
plugin file as "plugin.min.js" */
/* Your plugin file: plugin.min.js */
tinymce.PluginManager.add('my_crazy_plugin', function(editor) {
var state;
/* Actions to do on button click */
function my_action() {
state = !state; /* Switching state */
editor.fire('mybutton', {state: state});
if (state){
alert(state); /* Do your true-stuff here */
}
else {
alert(state); /* Do your false-stuff here */
}
}
function toggleState_MyButton() {
var self = this;
editor.on('mybutton', function(e) {
self.active(e.state);
});
}
/* Adding the button & command */
editor.addCommand('cmd_mybutton', my_action);
editor.addButton('mybutton', {
image: 'tinymce/plugins/my_crazy_plugin/img/some16x16icon.png',
title: 'That Bubble Help text',
cmd: 'cmd_mybutton',
onPostRender: toggleState_MyButton
});
});
/* Your file with the tinymce init section: */
tinymce.init({
plugins: [
"my_crazy_plugin"
],
toolbar: "mybutton"
});
这篇关于TinyMCE 4切换工具栏按钮状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文