So bearbeiten Sie das eigentliche Absatz-Dropdown in TinyMCE mit benutzerdefinierten Textstilen

Ich möchte den Backend-Benutzern nur 4 Textstile zur Auswahl geben. Headline, Subheadline, Paragraph und ein Stil namens .statement .

Die Suche nach Begriffen wie “benutzerdefinierte Stile in TinyMCE” endete immer mit diesem Artikel von WordPress selbst. https://codex.wordpress.org/TinyMCE_Custom_Styles

Bildbeschreibung hier eingeben

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

Im ersten Schritt interessiert es mich eigentlich nicht, wie sie sowohl im Drop-Down als auch im visuellen Editor aussehen. Der Schlüssel hier ist, unnötige Styling-Optionen zu entfernen; Optionen, die das Design & Frontend nicht unterstützt. (Obwohl es großartig wäre, das Aussehen des Editors selbst zu verändern)

.

function my_mce_before_init_insert_formats( $init_array ) {

Ich schaute auf das $init_array und konnte nicht finden, wo das Dropdown erstellt wird.

Begeistert von deinen Vorschlägen 🙂

Louis!

Solutions Collecting From Web of "So bearbeiten Sie das eigentliche Absatz-Dropdown in TinyMCE mit benutzerdefinierten Textstilen"

Ich hatte das gleiche Problem und hier ist, was Sie tun können. Der folgende Code deaktiviert das h1-Tag aus dem Abschnitt “Blockformate”. Auf die gleiche Weise können Sie andere Tags deaktivieren und auch eigene hinzufügen. Aber ich bin mir nicht sicher, wie ich ihnen benutzerdefinierte CSS-Stile hinzufügen kann. Ich hoffe, dieser Code wird Ihnen einen Hinweis geben, wie Sie graben 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' ); 

Aktualisieren:

Das, wonach du gesucht hast, war möglich, bevor WordPress 3.9 veröffentlicht wurde. Früher mussten Sie diese Codezeilen schreiben, um es zu ermöglichen. Leider ist theme_advanced_styles veraltet, seit WP 3.9 das TinyMCE auf Version 4 aktualisiert hat ( siehe Change Log ). Weitere Informationen zum Andrew Ozz Blog .

So war es früher ( Quelle ):

 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 Drop-down-Menü für Standard-Dropdown-Menüs und Add-Formate mit vier Stilen entfernen. Dies hilft Ihnen, Verwirrungen mit den Benutzern zu vermeiden, aus welchen Dropdowns sie Stile auswählen.

Deaktivieren Sie das Standard-Dropdown-Menü:

 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' ); 

Neues Drop-down-Menü für neue Formate hinzufügen ( mehr hier ):

 // 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 Aussehen in Ihrem Editor zu erhalten: ( Erfahren Sie mehr )

 /** * 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.