WordPress Development Asked by mf27 on January 29, 2021
I guess this should be a very simple question, but I’m not too familiar with overall functioning of WordPress / TinyMCE so I’m struggling:
I’ve added a custom button to TinyMCE and need some kind of reference to a corresponding DOM element that would enable me to set a function handler for the ‘click’ event. Every click should dynamically change some other parts of the TinyMCE editor so I also need to refresh (‘reflow’?) the view somehow.
Among answers to similar questions I couldn’t find exactly what I’m looking for.
Here’s the relevant part of the main .php file of the plugin:
require( 'tinymce-buttons/buttons.php' );
add_action( 'init', 'py2web_buttons' );
function py2web_buttons() {
add_filter( "mce_external_plugins", "py2web_add_buttons" );
add_filter( 'mce_buttons', 'py2web_register_buttons' );
}
function py2web_add_buttons( $plugin_array ) {
$plugin_array['py2web'] = plugins_url() . '/py2web/tinymce-buttons/buttons.js';
return $plugin_array;
}
function py2web_register_buttons( $buttons ) {
array_push( $buttons, 'problem', 'solution' );
return $buttons;
}
And the relevant part of the corresponding buttons.js file:
tinymce.create('tinymce.plugins.Py2Web', {
count_problems : function(ed) {
// Get body text
body_text = ed.getBody().textContent;
ids = [];
// Parse text of the body
do {
var re_match = re.exec(body_text);
if ( re_match ) {
ids.push( re_match[1] );
}
else {
break;
}
} while ( 1 );
return ids;
},
init : function(ed, url) {
ed.addButton('problem', {
title : 'Add problem',
cmd : 'problem',
image : url + '/images/wturm.png'
});
ed.addCommand('problem', function() {
var selected_text = ed.selection.getContent();
nr_added = count_problems(ed).length;
var id = nr_added + 1;
var return_text = '[problem id="' + id + '"] ' + selected_text + ' [/problem]';
ed.execCommand('mceInsertContent', 0, return_text);
sol_button = ed.buttons['solution'];
});
ed.addButton('solution', {
disabled: 0,//count_problems(ed).length == 0,
title : 'Add problem solution',
//cmd: 'solution_fun',
image : url + '/images/wspringer.png',
type: 'menubutton',
menu: [{text: 'problem id = ' + 1, value: 1}],
onselect: function(v1) {
ed.windowManager.open({
title: 'Insert solution in popeye output format',
body: [{type: 'textbox', name: 'solution', label: "solution", width: 300, height: 50}],
width: 270,
height: 70,
onsubmit: function(v2) {
console.log(v1);
solution( v2.data.solution, v1.control.settings.value );
}
});
};
});
ed.addCommand('solution_fun', function() {
set_solution_menu(ed);
});
function solution( selected_text, target='1' ) {
return_text = '[solution target="' + target + '"]' + selected_text + '[/solution]';
ed.execCommand('mceInsertContent', 0, return_text);
};
}
Thanks for any help.
Try adding an id
attribute in your button definition:
ed.addButton('solution', {
disabled: 0,//count_problems(ed).length == 0,
id: 'my_button',
title : 'Add problem solution',
//cmd: 'solution_fun',
image : url + '/images/wspringer.png',
type: 'menubutton',
menu: [{text: 'problem id = ' + 1, value: 1}],
onselect: function(v1) {
ed.windowManager.open({
title: 'Insert solution in popeye output format',
body: [{type: 'textbox', name: 'solution', label: "solution", width: 300, height: 50}],
width: 270,
height: 70,
onsubmit: function(v2) {
console.log(v1);
solution( v2.data.solution, v1.control.settings.value );
}
});
};
});
And see if you can access is with jQuery('#my_button')
Answered by phatskat on January 29, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP