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]'
                        );
                    }
                });
            }
        });
    });
})();

Related


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

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 with an image like this : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_ta

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 with an image like this : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_ta

Add Custom Buttons to TinyMCE in WordPress

John Smith I want to add a new button with a popup to TinyMCE. But I never see the button. I may be doing something wrong with this modification. How can I insert a new button on that TinyMCE code? I have this TinyMCE code to display in Wordpress frontend:

Add custom text color WordPress 3.9 TinyMCE 4 visual editor

iSaumya I have a code snippet that helps me add some custom colors to the visual editor text color dropdown as well as the default color. I am going to paste the code snippet below. function change_mce_options( $init ) { $default_colours = '000000,993300,333

Add custom text color WordPress 3.9 TinyMCE 4 visual editor

iSaumya I have a code snippet that helps me add some custom colors to the visual editor text color dropdown as well as the default color. I am pasting the code snippet below. function change_mce_options( $init ) { $default_colours = '000000,993300,333300,003

Add custom text color WordPress 3.9 TinyMCE 4 visual editor

iSaumya I have a code snippet that helps me add some custom colors to the visual editor text color dropdown as well as the default color. I am pasting the code snippet below. function change_mce_options( $init ) { $default_colours = '000000,993300,333300,003

How to add shortcode in text tab of editor?

username Take a look at the image below to understand exactly what I mean. I know how to add snapshot codes to tinymce, but I don't know how to add shortcodes to text tabs. I want to add my shortcode next to the "full screen" button. What is the solution? Bras

How to add shortcode in text tab of editor?

username Take a look at the image below to understand exactly what I mean. I know how to add snapshot codes to tinymce, but I don't know how to add shortcodes to text tabs. I want to add my shortcode next to the "full screen" button. What is the solution? Bras

Add custom style formatting to tinymce editor

bounce I want to add new style formatting to tinymce editor. One way is to edit the Ip/Internal/Core/assets/tinymce/default.jsfile: ... style_formats : [ {title : 'Quote', inline : 'span', classes : 'quote'}, {title : 'Note', inline : '

Is it possible to add classes to custom tinyMCE buttons?

Pym Action I have a web page in which I am using jQuery UI with tinyMCE. I've added a custom button for the purpose of dragging a draggable textfield with this button: Code: editor.addButton('drag', { text: 'Drag', icon: false,

Is it possible to add classes to custom tinyMCE buttons?

Pym Action I have a web page in which I am using jQuery UI with tinyMCE. I've added a custom button for the purpose of dragging a draggable textfield with this button: Code: editor.addButton('drag', { text: 'Drag', icon: false,

How to add custom attribute to Wordpress wp_editor text area?

Kapil yadav How to add custom attribute to Wordpress wp_editor textarea field? In the official documentation, there is no way to do this. I need to add a client-side validation attribute (data-bvalidator="required") to a text area generated by WordPress ' wp_e

How to add custom attribute to Wordpress wp_editor text area?

Kapil yadav How to add custom attribute to Wordpress wp_editor textarea field? In the official documentation, there is no way to do this. I need to add a client-side validation attribute (data-bvalidator="required") to a text area generated by WordPress ' wp_e

How to add custom attribute to Wordpress wp_editor text area?

Kapil yadav How to add custom attribute to Wordpress wp_editor textarea field? In the official documentation, there is no way to do this. I need to add a client-side validation attribute (data-bvalidator="required") to a text area generated by WordPress ' wp_e

How to add custom attribute to Wordpress wp_editor text area?

Kapil yadav How to add custom attribute to Wordpress wp_editor textarea field? In the official documentation, there is no way to do this. I need to add a client-side validation attribute (data-bvalidator="required") to a text area generated by WordPress ' wp_e

How to add custom attribute to Wordpress wp_editor text area?

Kapil yadav How to add custom attribute to Wordpress wp_editor textarea field? In the official documentation, there is no way to do this. I need to add a client-side validation attribute (data-bvalidator="required") to a text area generated by WordPress ' wp_e

How to migrate custom buttons and dialogs to TinyMCE 5

Gypsy I have a 3rd party Bootstrap plugin (probably EOL) that adds buttons to the toolbar which in turn open a dialog where Bootstrap elements can be selected to add to the content. It uses the following code: var insertBtn = tinymce.ui.Factory.create({ ty

How to migrate custom buttons and dialogs to TinyMCE 5

Gypsy I have a 3rd party Bootstrap plugin (probably EOL) that adds buttons to the toolbar which in turn open a dialog where Bootstrap elements can be selected to add to the content. It uses the following code: var insertBtn = tinymce.ui.Factory.create({ ty