Button TinyMCE 4切换工具栏按钮状态
切换工具栏按钮状态的最简单方法是什么(就像它与默认的粗体按钮一起工作)?我无法“进入”将按钮外观从默认更改为选中的class I Tinymce。这是我的插件代码(简化):Button TinyMCE 4切换工具栏按钮状态,button,tinymce,toggle,toolbar,Button,Tinymce,Toggle,Toolbar,切换工具栏按钮状态的最简单方法是什么(就像它与默认的粗体按钮一起工作)?我无法“进入”将按钮外观从默认更改为选中的class I Tinymce。这是我的插件代码(简化): 经过一番摆弄,我得出结论,onclick在这里做不到。几个小时后,我终于找到了这个解决方案,它可以在Tinymce 4.x中很好地工作: /* In the timymce > plugins, name your pluginfolder "my_crazy_plugin" and plugin file as "p
经过一番摆弄,我得出结论,onclick在这里做不到。几个小时后,我终于找到了这个解决方案,它可以在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"
});
如果其他人发现本文是针对这个问题的——我找到了一种更简单的方法,使用4.0.16中的onclick:
/* 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) {
/* Actions to do on button click */
function my_action() {
this.active( !this.active() );
var state = this.active();
if (state){
alert(state); /* Do your true-stuff here */
}
else {
alert(state); /* Do your false-stuff here */
}
}
editor.addButton('mybutton', {
image: 'tinymce/plugins/my_crazy_plugin/img/some16x16icon.png',
title: 'That Bubble Help text',
onclick: my_action
});
});
/* Your file with the tinymce init section: */
tinymce.init({
plugins: [
"my_crazy_plugin"
],
toolbar: "mybutton"
});
在TinyMCE 4中,您可以使用更简单的状态选择器设置:
editor.addButton('SomeButton', {
text: 'My button',
stateSelector: '.class-of-node' // or use an element (an id would probably work as well, but I haven't tried it myself)
});
也可以使用“nodechange”事件使用自定义逻辑
参考:
命令中的第一次火灾状态更改:
editor.fire('FullscreenStateChanged', {state: fullscreenState});
On按钮onPostRender更改按钮状态:
onPostRender: function() {
var self = this;
editor.on('FullscreenStateChanged', function(e) {
self.active(e.state);
});
}
这是完美的解决方案!!
editor.fire('FullscreenStateChanged', {state: fullscreenState});
onPostRender: function() {
var self = this;
editor.on('FullscreenStateChanged', function(e) {
self.active(e.state);
});
}