it-swarm.com.de

So bearbeiten Sie das tatsächliche Absatz-Dropdown-Menü in TinyMCE mit benutzerdefinierten Textstilen

Ich möchte den Backend-Benutzern nur 4 Textstile zur Auswahl geben. Überschrift, Unterüberschrift, Absatz und ein Stil, den wir .statement genannt haben.

Bei der Suche nach Begriffen wie "Benutzerdefinierte Stile in TinyMCE" wurde dieser Artikel immer von WordPress selbst erstellt. https://codex.wordpress.org/TinyMCE_Custom_Styles

 enter image description here 

Leider möchte ich keinen Zugriff auf ein anderes Dropdown gewähren. Ich muss das aktuelle Dropdown-Menü des Inhalts entfernen und es mit meinen eigenen Stilen füllen.

Im ersten Schritt ist es mir eigentlich egal, wie sie sowohl im Dropdown als auch im visuellen Editor selbst aussehen. Der Schlüssel hier ist, unnötige Styling-Optionen wegzunehmen; Optionen, die vom Design und Frontend nicht unterstützt werden. (Obwohl es großartig wäre, das Aussehen im Editor selbst zu ändern)

.

function my_mce_before_init_insert_formats( $init_array ) {

Ich habe den $init_array angesehen und konnte nicht finden, wo das Dropdown erstellt wird.

Freut mich über eure Vorschläge :)

Louis!

2
kater louis

Ich hatte das gleiche Problem und hier ist, was Sie tun können. Der folgende Code deaktiviert das h1-Tag im Blockformate-Abschnitt. Auf die gleiche Weise können Sie andere Tags deaktivieren und auch eigene hinzufügen. Ich bin mir jedoch nicht sicher, wie ich ihnen benutzerdefinierte CSS-Stile hinzufügen soll. Ich hoffe, dieser Code gibt Ihnen einen Hinweis darauf, wie Sie Dig ausführen können.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );


Update:

Das, wonach Sie suchen, war möglich, bevor Wordpress 3.9 veröffentlicht wurde. Früher mussten Sie diese Codezeilen schreiben, um dies zu ermöglichen. Leider ist theme_advanced_styles veraltet, da WP 3.9 den TinyMCE auf Version 4 aktualisiert hat ( siehe Änderungsprotokoll ). Weitere Informationen im Andrew Ozz Blog .

So war es früher ( source ):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');


Lösung:

Wie auch immer, ich habe meine Lösung für Ihre Aufgabe. Sie können das Standard-Dropdown-Menü entfernen und ein Format-Dropdown-Menü mit vier Stilen hinzufügen. Dies hilft Ihnen, Verwechslungen mit den Benutzern zu vermeiden, aus welchen Dropdown-Listen sie Stile auswählen.

Deaktivieren Sie das Standard-Dropdown:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );


Neue Formate hinzufügen ( hier mehr ):

// Callback function to insert 'styleselect' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons', 'my_new_mce_buttons' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );


Der Letzte. Registrieren Sie die CSS-Datei, um das visuelle Erscheinungsbild in Ihrem Editor zu erhalten: ( Weitere Informationen )

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );


Hoffe das hilft.

3
Vlad