TinyMCE: Hinzufügen von CSS zum Format-Dropdown

20

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?

Bildbeschreibung hier eingeben

Marc P
quelle

Antworten:

44

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

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

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] );
    }
}
bueltge
quelle
Ich denke, ich verstehe das konzeptionell: Im Wesentlichen entfernen Sie das Standard-Formatierungsfeld von WP und fügen dann Ihr eigenes Stil-Dropdown-Menü hinzu, um das Styling zu steuern. Ist mein Verständnis korrekt?
Marc P
Recht. Derzeit kann ich keinen Haken zum Ändern des formatselectDropdowns finden. Diese Dropdown-Liste hat keine Funktion zum Erstellen eines Menüs, es handelt sich um statische Werte in der tinymce.js von WP.
Bueltge
Auch den Hinweis auf diese Antwort habe ich jetzt dort gefunden.
Bueltge
Ach ok Vielen Dank, dies ist eine gute Lösung für den Moment. Ich werde es ausprobieren!
Marc P
2
Hinweis: Die Standardstile können durch Hinzufügen $settings['style_formats_merge'] = true;in »fb_mce_before_init ()« zur Dropdown-Liste der Formate hinzugefügt werden .
Nicolai
5

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;
}
helgatheviking
quelle
2

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;
}
s6712
quelle
Hinweis: Die Standardstile können durch Hinzufügen $settings['style_formats_merge'] = true;in »fb_mce_before_init ()« zur Dropdown-Liste der Formate hinzugefügt werden .
Nicolai