kann ich der Formatoption im Textfeld ein benutzerdefiniertes Format hinzufügen?

16

Ist es möglich, im Texteditor, in dem Sie Überschriften und andere Einstellungen festlegen können, eigene Stile für Clients hinzuzufügen? und sogar die unnötigen entfernen?

Milder Flaum
quelle
2
WP3 und TinyMCE sind in diesem Punkt so durcheinander. Ich kann nicht glauben, dass es nicht einfach ist, die verdammten Formate wie in CKEditor hinzuzufügen oder anzupassen.
Cherouvim
1
Ich stimme zu, es ist ein totaler Schmerz.
Mild Fuzz

Antworten:

17

Der "klassische" TinyMCE-Editor verfügt über zwei Dropdown-Listen: formatselectfür Absatzformate und styleselectfür Zeichenformate - die auch Absatzformate enthalten können, um die Darstellung zu vereinfachen . Die Konfiguration in WordPress zeigt standardmäßig nur das Format Dropdown. Wenn Sie ein benutzerdefiniertes Stylesheet auf den Editor anwenden, kann TinyMCE damit die Klassennamen abrufen und zur Stil- Dropdown- Liste hinzufügen. Dies hat jedoch nicht jedes Mal bei mir funktioniert.

Seit 3.0 kann man anrufen add_editor_style() in Ihrem functions.phpein Stylesheet zum Editor hinzuzufügen. Standardmäßig befindet es sich editor-style.cssin Ihrem Themenverzeichnis. Vor 3.0 müssen Sie sich in den mce_cssFilter einhängen , um die URL zu Ihrem Editor-Stylesheet hinzuzufügen. Dies wird am Ende des content_cssTinyMCE - Konfigurationswert .

Um die Stil- Dropdown-Liste hinzuzufügen, styleselectmuss die Option in einem der Konfigurationsfelder der Schaltflächenleiste angezeigt werden ( theme_advanced_buttons[1-4]in TinyMCE, gefiltert nach mce_buttons_[1-4]in WordPress). Die Liste der Blockformate wird durch die theme_advanced_blockformatsOption von TinyMCE gesteuert , die Sie dem Steuerfeld in der hinzufügen könnentiny_mce_before_init Filter . Wenn Sie die Namen der Stil- Dropdown-Liste anpassen möchten (nicht nur Ihre CSS-Klassennamen), sehen Sie sich die theme_advanced_stylesOption an . Sie können auch die erweiterte style_formatsOption verwenden, mit der Sie die Stile flexibler definieren können.

Der entsprechende PHP-Code mit allen Hooks und der Standardkonfiguration ist wp-admin/includes/post.phpin Funktionwp_tiny_mce() . Alles in allem könnte Ihr Setup so aussehen:

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}
Jan Fabry
quelle
Gibt es ein spezielles Format für die CSS-Datei, das add_editor_style verwendet? nichts scheint zu passieren
Mild Fuzz
1
@Mild Fuzz: Meine frühere Antwort war irreführend, weil WordPress nur eines der beiden benötigten Dropdowns anzeigt. Ich habe meine Antwort mit einer Möglichkeit aktualisiert, die zweite Dropdown-Liste hinzuzufügen und zu steuern.
Jan Fabry
1
@Mild Fuzz: Die Parameter zu den verschiedenen style_formatsElementen werden auf der entsprechenden formatsWiki-Seite erklärt.
Jan Fabry
1
no longr erzeugt Fehler, hat aber keine Auswirkung!
Mild Fuzz
1
json_encode erzeugt "und nicht". , so dass die Javascript - Pausen Sie müssen str_replace tun (" ' "'", json_encode ($ style_formats))
cherouvim
0

Wie hier gezeigt, zeigt das TinyMCE-Format-Dropdown keine Stilvorschauen mehr an

Kara hatte es richtig gemacht, Sie müssen die Standardstile deaktivieren, um die neuen Stile zu sehen ...

unset($init['preview_styles']);

return $settings;
user2136473
quelle
Bitte fügen Sie weitere Details hinzu, es ist zB nicht klar, was $settingshier ist. Danke
Birgire