web-dev-qa-db-de.com

Wie Sie den Inhalt des tinyMCE-Haupteditors mit zusätzlichen Tags versehen

Ich bin auf WP 4.6, das tinyMCE 4 hat. Ich muss den Inhalt meines Post-Editor-Tabs mehr WYSIWYG anzeigen. Ich hänge eine CSS-Datei mit meinen Front-End-Stilen mit add_editor_style an den Editor an. Damit der Inhalt des Editors jedoch viele dieser Stile annehmen kann, muss er auch in ein paar HTML-Tags - divs mit bestimmten Klassen - eingebunden werden.

Die tinyMCE-Dokumentation ist ein bisschen besser als früher, aber es ist immer noch ein Albtraum, herauszufinden, wie der Inhalt geholt und verpackt werden kann, wenn tinyMCE auftaucht. Ich versuche diesen Test, um eine Zeichenfolge an den Inhalt anzuhängen:

tinymce.init({
    selector: 'textarea#content.wp-editor-area',
    setup   : function(ed) {
        ed.on('BeforeSetContent', function(event) {
            event.content += '????????????????????????????????????????';
        });
    }
});

Dies scheint jedoch nicht die tinyMCE-Instanz des Hauptposteditors auszuwählen. Ich kann keine Dokumentation darüber finden, was für die selector unterstützt wird und ob es notwendig ist. Kann mich jemand in die richtige Richtung weisen?

2
And Finally

Persönlich gestalte ich den gesamten Inhalt des WP Editors mit just einer einzelnen Klasse, normalerweise .entry-content, den ich im folgenden Beispiel verwendet habe.

Wenn ich den Inhalt aus dem WP Editor am Frontend ausgebe, verpacke ich ihn in div.entry-content. Die Verwendung einer einzelnen HTML-Klasse vereinfacht Folgendes:

style.css

.entry-content h2 {
    color: purple;
}
/* etc ... */

Ich verwende add_editor_style() auch, um das Standard-Stylesheet meines Themes in tinyMCE zu laden:

function wpse247805_editor_styles() {
    // Use our existing main stylesheet for TinyMCE too.
    add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'wpse247805_editor_styles' );

Ich benutze die wpse247805_editor_styles_class() -Funktion unten, die einfach die .entry-content -Klasse zum tinyMCE <body> -Element hinzufügt.

/**
 * Add .entry-content to the body class of TinyMCE.
 * @param array $settings TinyMCE settings.
 * @return array TinyMCE settings.
 */
function wpse247805_editor_styles_class( $settings ) {
    $settings['body_class'] = 'entry-content';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpse247805_editor_styles_class' );

Manchmal finde ich es notwendig, die auf .entry-content angewendeten Stile im WP Editor zu überschreiben. Ich benutze Sass und ich habe einen Teil für diesen Zweck gewidmet.

// TinyMCE .wp-content overrides.
body#tinymce.wp-editor {

    // Override Foundation's height: 100%; because WP Editor in 4.0+ won't scroll down all of the way otherwise.
    height: auto !important;

    &.entry-content {
        margin: 16px;
    }
}
2
Dave Romsey