Benutzerdefiniertes Format div in TinyMCE Zusammenführung mit vorherigem div

Ich habe ein benutzerdefiniertes Format im Editor mit erstellt

array(
    'title' => 'Tab',
    'block' => 'div',
    'classes' => 'tab',
    'wrapper' => true,
    'exact' => true,
),

Ich kann es dann verwenden, indem ich einen Text auswähle und mein Format wähle, um Folgendes zu erhalten:

<div class="tab">
   <h3>My Content heading 1</h3>
   <p>My first bit of content here...</p>
</div>

So weit, ist es gut. Wenn ich jedoch den folgenden Text auswähle und mein Format wähle, wird das vorhandene div erweitert, anstatt ein neues einzufügen, sodass ich am Ende Folgendes habe:

<div class="tab">
  <h3>My Content heading 1</h3>
  <p>My first bit of content here...</p>
  <h3>My Content heading 2</h3>
  <p>My second bit of content here...</p>
</div>

Wenn ich das will:

<div class="tab">
  <h3>My Content heading 1</h3>
  <p>My first bit of content here...</p>
</div>
<div class="tab">
  <h3>My Content heading 2</h3>
  <p>My second bit of content here...</p>
</div>

Das Festlegen des Parameters “exact” beim Erstellen des Formats scheint dieses Verhalten nicht zu ändern, wenn ich es erwarten würde. Hilf mir bitte.

Fügen Sie diese Funktionen zur „functions.php“ Ihres Themas hinzu, um neue Schaltflächen in TinyMCE zu registrieren.

// init scripts
add_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 css
if ( ! 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 filter
if ( ! 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 js
if ( ! 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 editor
if ( ! function_exists( 'custom_tinymce_register_buttons' ) ) {
    function custom_tinymce_register_buttons( $buttons ) {
        array_push( $buttons, 'wrap_tab' );
        return $buttons;
    }
}

Erstellen Sie dann eine neue JS-Datei mit dem Namen „tinymce_buttons.js“ unter Ihrem „[theme]/js’-Verzeichnis und fügen Sie den folgenden Code hinzu.

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

Sie können dann die CSS-Stile einschließen – erstellen Sie eine neue CSS-Datei mit dem Namen „custom-editor-style.css“ in Ihrem Themenordner mit Stildefinitionen für Ihr DIV-Element.

#tinymce .tab{ padding:10px; border: 1px #666 solid; }

Hoffe, das hilft und Credits gehen an https://madebydenis.com/adding-custom-buttons-in-tinymce-editor-in-wordpress/.