To create dynamic menu options for a custom TinyMCE button, you can use the onclick
event of the button to open a modal dialog or a popup and populate it with the dynamic options.
Here's an example of how to do it:
onclick
event handler: editor.addButton('mycustombutton', {
text: 'My Custom Button',
onclick: function() {
openMyPopup();
}
});
openMyPopup()
function that will open the popup and populate it with dynamic menu options: function openMyPopup() {
// 1. Create the popup
// 2. AJAX call to retrieve the dynamic menu options
// 3. Populate the popup with the menu options
// 4. Add event handlers to the menu options
// Example:
var popup = editor.windowManager.open({
title: 'My Custom Popup',
body: [
{
type: 'select',
name: 'myselect',
label: 'Select an option',
options: [] // Empty options, to be populated dynamically
}
],
onsubmit: function(e) {
// Handle the selected option
}
});
// AJAX call to retrieve the dynamic menu options
// ...
// Populate the select input with the options
// ...
// Add event handlers to the select input
// ...
}
In the openMyPopup()
function, you can use an AJAX call to retrieve the dynamic menu options, and then populate the popup with those options. You can also add event handlers to those options to handle the selected option.
Finally, in the onsubmit
event handler of the popup, you can handle the selected option and perform the desired action.
Note: Depending on your specific use case, you may need to adjust this example to fit your needs.
Asked: 2021-07-16 11:00:00 +0000
Seen: 9 times
Last updated: Aug 24 '21