TinyMCE: Hinzufügen von CSS zum Format-Dropdown

Ich habe mit add_editor_style () erfolgreich ein TinyMCE-Stylesheet hinzugefügt, damit ich eine Vorschau der Stile im Hauptteil des TinyMCE-Editors anzeigen kann.

Geht ich jedoch zu Recht davon aus, dass die Funktion add_editor_style () nur auf den Style für den Hauptteil des Editors zugreifen kann?

Wenn ja, gibt es eine andere Methode oder Funktion, mit der ich auch auf das Styling des Dropdown-Menüs TinyMCE-Format zugreifen kann?

Sie können die Dropdown-Liste nicht erweitern formatselect. Sie können jedoch mit dem Haken tiny_mce_before_initdie zweite Dropdown-Liste erweitern styleselect, da sich in einer Standard-WordPress-Installation verstecken soll. Die Dokumentation listet alle Vorgaben und Möglichkeiten auf.

• inline - Name des Inline-Elements, das erzeugt werden soll, z. B. "span". Die aktuelle Textauswahl wird in dieses Inline-Element eingeschlossen.
• block - Name des zu erzeugenden Blockelements, zum Beispiel "h1". Vorhandene Blockelemente in der Auswahl werden durch das neue Blockelement ersetzt.
• selector - CSS 3-Auswahlmuster zum Suchen von Elementen in der Auswahl nach. Dies kann verwendet werden, um Klassen auf bestimmte Elemente oder komplexe Dinge wie ungerade Zeilen in einer Tabelle anzuwenden.
• classes - Durch Leerzeichen getrennte Liste von Klassen, um die ausgewählten Elemente oder das neue Inline- / Block-Element anzuwenden.
• styles - Name / Wert-Objekt mit CSS-Stilelementen, die angewendet werden sollen, z. B. Farbe usw.
• Attribute - Name / Wert-Objekt mit Attributen, die auf die ausgewählten Elemente oder das neue Inline / Block-Element angewendet werden sollen.
• exact - Deaktiviert die Funktion zum Zusammenführen ähnlicher Stile, wenn sie verwendet wird. Dies wird für einige CSS-Vererbungsprobleme benötigt, z. B. für die Textdekoration für Unterstreichungen.
• wrapper - Status, der angibt, dass das aktuelle Format ein Containerformat für Blockelemente ist. Zum Beispiel ein Div-Wrapper oder ein Blockquote.

Die Style-Schaltfläche

Beachten Sie, dass das Dropdown-Menü "Stil" standardmäßig in WordPress ausgeblendet ist. Fügen Sie zunächst die Schaltfläche für benutzerdefinierte Formate zu einer Menüleiste von TinyMCE hinzu, in Beispiel Zeile 2 mit Haken mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Die benutzerdefinierten Stile

Dann verbessern Sie die Dropdown-Liste dieser Schaltfläche. Nützlich ist auch die Erweiterung über einen zusätzlichen Wert im Array, siehe den Codex für dieses Beispiel.

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Ergebnis

Erweitertes Dropdown-Menü

Sie können das Dropdown-Menü auch mit einem Baummenü erweitern. Erstellen Sie die Variable aus der obigen Beispielquelle mit mehr Struktur im Array, wie die folgende Quelle.

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

Weitere Möglichkeiten und Parameter finden Sie in den Standardwerten des Dropdown-Felds Stilformat (in Javascript schreiben).

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

Fügen Sie dem Editor ein benutzerdefiniertes Stylesheet hinzu

Jetzt ist der letzte Punkt, an dem Sie das benutzerdefinierte CSS für diese Formate über Hook einbinden mce_css.

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

Vergessen Sie nicht, diese Stylesheet-Regeln auch dem Front-End-Stylesheet hinzuzufügen.

Entfernen Sie die Formatierungsschaltfläche

Als Verbesserung können Sie die formatselectDropdown-Schaltfläche entfernen, indem Sie den Wert im Schaltflächen-Array überprüfen. Fügen Sie der Funktion fb_mce_editor_buttonsam Hook die folgende Quelle hinzu mce_buttons_2.

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

Gemäß dieser Antwort lautet der Schlüssel zum Anzeigen der Stile in der Dropdown-Liste:unset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

Sehr hilfreich und danke für defaultstylesHinweise. Ich stellte fest, dass das Zusammenführen von Arrays erst dann funktioniert hat, wenn diese Standardoptionen in gültiges JSON (ungültiges JavaScript) konvertiert wurden. Unten können Anfügen der Wordpress tinymce der Drop-down statt ersetzen

Standardoptionen (JSON):

$defaults = '[{ "title": "Headers", "items": [
        { "title": "Header 1", "format": "h1" },
        { "title": "Header 2", "format": "h2" },
        { "title": "Header 3", "format": "h3" },
        { "title": "Header 4", "format": "h4" },
        { "title": "Header 5", "format": "h5" },
        { "title": "Header 6", "format": "h6" }
    ] },

    { "title": "Inline", "items": [
        { "title": "Bold", "icon": "bold", "format": "bold" },
        { "title": "Italic", "icon": "italic", "format": "italic" },
        { "title": "Underline", "icon": "underline", "format": "underline" },
        { "title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough" },
        { "title": "Superscript", "icon": "superscript", "format": "superscript" },
        { "title": "Subscript", "icon": "subscript", "format": "subscript" },
        { "title": "Code", "icon": "code", "format": "code" }
    ] },

    { "title": "Blocks", "items": [
        { "title": "Paragraph", "format": "p" },
        { "title": "Blockquote", "format": "blockquote" },
        { "title": "Div", "format": "div" },
        { "title": "Pre", "format": "pre" }
    ] },

    { "title": "Alignment", "items": [
        { "title": "Left", "icon": "alignleft", "format": "alignleft" },
        { "title": "Center", "icon": "aligncenter", "format": "aligncenter" },
        { "title": "Right", "icon": "alignright", "format": "alignright" },
        { "title": "Justify", "icon": "alignjustify", "format": "alignjustify" }
        ] }
 ]'; 

In functions.php geben Sie den größeren Options-Hash zurück:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}