How to Add Custom Shortcode Buttons in TinyMCE Editor WordPress
Harun R Rayhan
Hi, I am using the latest version of WordPress. I want to add my shortcode in TinyMCE editor like this image : http://prntscr.com/72ycrs
My shortcode is:
[my_tabs]
[my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab]
[my_tab title = "Tab Two Tiltle"]
[my_gallery source = "media: 2893" title = "Image Title"]
Tab Two COntent Goes Here [/my_tab]
[/my_tabs]
Can anyone help me to create a custom button for my shortcode as shown above. I don't know much about javascript and jQuery. Thanks in advance.
odie2
Simplest popup built with Twist That code : How to add custom buttons to WordPress TinyMCE editor
functions.php:
// Filter Functions with Hooks
function harun_mce_button() {
// Check if user have permission
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// Check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'harun_tinymce_plugin' );
add_filter( 'mce_buttons', 'harun_register_mce_button' );
}
}
add_action('admin_head', 'harun_mce_button');
// Function for new button
function harun_tinymce_plugin( $plugin_array ) {
$plugin_array['harun_mce_button'] = get_template_directory_uri() .'/js/harun_editor_plugin.js';
return $plugin_array;
}
// Register new button in the editor
function harun_register_mce_button( $buttons ) {
array_push( $buttons, 'harun_mce_button' );
return $buttons;
}
Active theme/js/harun_editor_plugin.js :
(function() {
tinymce.PluginManager.add('harun_mce_button', function(editor, url) {
editor.addButton('harun_mce_button', {
icon: false,
text: "Harun's Tabs",
onclick: function() {
editor.windowManager.open({
title: "Insert Harun's Tabs",
body: [{
type: 'textbox',
name: 'tab1title',
label: 'Tab One Title',
value: ''
},
{
type: 'textbox',
name: 'tab1content',
label: 'Tab One Content',
value: ''
},
{
type: 'textbox',
name: 'tab2title',
label: 'Tab Two Title',
value: ''
},
{
type: 'textbox',
name: 'tab2content',
label: 'Tab Two Content',
value: ''
},
{
type: 'textbox',
name: 'gallerysource',
label: 'Gallery source',
value: ''
},
{
type: 'textbox',
name: 'gallerytitle',
label: 'Gallery title',
value: ''
}],
onsubmit: function(e) {
editor.insertContent(
'[my_tabs][my_tab title="' +
e.data.tab1title +
'"]' +
e.data.tab1content +
'[/my_tab][my_tab title="' +
e.data.tab2title +
'"][my_gallery source="' +
e.data.gallerysource +
'" title="' +
e.data.gallerytitle +
'"]' +
e.data.tab2content +
'[/my_tab][/my_tabs]'
);
}
});
}
});
});
})();