Custom Format div in TinyMCE Merges with previous div
Add these functions to your theme's 'functions.php' for registering new button in TinyMCE.
// init scriptsadd_action( 'after_setup_theme', 'custom_tinymce_theme_setup' );if ( ! function_exists( 'custom_tinymce_theme_setup' ) ) { function custom_tinymce_theme_setup(){ add_action( 'admin_init', 'custom_tinymce_theme_add_editor_styles' ); add_action( 'init', 'custom_tinymce_buttons' ); }}// add editor custom cssif ( ! function_exists( 'custom_tinymce_theme_add_editor_styles' ) ) { function custom_tinymce_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); }}// add editor button filterif ( ! function_exists( 'custom_tinymce_buttons' ) ) { function custom_tinymce_buttons() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } if ( get_user_option( 'rich_editing' ) !== 'true' ) { return; } add_filter( 'mce_external_plugins', 'custom_tinymce_add_buttons' ); add_filter( 'mce_buttons', 'custom_tinymce_register_buttons' ); }}// call editor custom jsif ( ! function_exists( 'custom_tinymce_add_buttons' ) ) { function custom_tinymce_add_buttons( $plugin_array ) { $plugin_array['wrap_tab'] = get_template_directory_uri().'/js/tinymce_buttons.js'; return $plugin_array; }}// add button to editorif ( ! function_exists( 'custom_tinymce_register_buttons' ) ) { function custom_tinymce_register_buttons( $buttons ) { array_push( $buttons, 'wrap_tab' ); return $buttons; }}
Then create a new JS file named 'tinymce_buttons.js' under your '[theme]/js' directory and add the following code.
(function() { tinymce.PluginManager.add( 'wrap_tab', function( editor, url ) { editor.addButton('wrap_tab', { title: 'Insert Tab', cmd: 'wrap_tab', text: 'Tab', }); editor.addCommand('wrap_tab', function() { var selected_text = editor.selection.getContent({ 'format': 'html' }); if ( selected_text.length === 0 ) { alert( 'Please select text that needs to be wrapped.' ); return; } var return_content = '<div class="tab">' + selected_text + '</div>'; editor.execCommand('mceReplaceContent', false, return_content); return; }); });})();
You can then include the CSS styles - create a new CSS file named 'custom-editor-style.css' under your theme folder with style definitions to your DIV element.
#tinymce .tab{ padding:10px; border: 1px #666 solid; }
Hope this helps and credits goes to https://madebydenis.com/adding-custom-buttons-in-tinymce-editor-in-wordpress/.