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.
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;
}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;
}
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'}
]}
];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.
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] );
}
}
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.$settings['style_formats_merge'] = true;in »fb_mce_before_init ()« zur Dropdown-Liste der Formate hinzugefügt werden .Gemäß dieser Antwort lautet der Schlüssel zum Anzeigen der Stile in der Dropdown-Liste:
unset($settings['preview_styles']);quelle
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 ersetzenStandardoptionen (JSON):
In functions.php geben Sie den größeren Options-Hash zurück:
quelle
$settings['style_formats_merge'] = true;in »fb_mce_before_init ()« zur Dropdown-Liste der Formate hinzugefügt werden .