Wie man den Inhalt des Haupt-tinyMCE-Editors mit zusätzlichen Tags umschließt

Ich bin auf WP 4.6, die tinyMCE 4 hat. Ich muss den Inhalt meines Post-Editors visuelle Registerkarte mehr WYSIWYG machen. Ich füge eine CSS-Datei mit meinen Frontend-Styles an den Editor mit add_editor_style . Aber für den Inhalt des Editors, um viele dieser Stile zu übernehmen, muss ich sie auch in ein paar HTML-Tags einbinden – divs mit bestimmten classn.

Die Dokumentation von tinyMCE ist ein bisschen besser als früher, aber es ist immer noch ein Alptraum, herauszufinden, wie man den Inhalt ergreift und ihn einpackt, wenn tinyMCE init ist. 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 den selector wird und ob es notwendig ist. Kann mir jemand in die richtige Richtung zeigen?

Solutions Collecting From Web of "Wie man den Inhalt des Haupt-tinyMCE-Editors mit zusätzlichen Tags umschließt"

Persönlich style ich den gesamten Inhalt, der im WP-Editor platziert wird, nur mit einer einzigen class, typischerweise dem .entry-content den ich im folgenden Beispiel verwendet habe.

Wenn ich den Inhalt aus dem WP-Editor am Frontend div.entry-content ich ihn in div.entry-content . Die Verwendung einer einzelnen HTML-class vereinfacht die Dinge:

style.css

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

Ich verwende auch add_editor_style() , um das Standard-Stylesheet meines Designs 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 verwende unten die function wpse247805_editor_styles_class() , die einfach die .entry-content class zum tinyMCE -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 Stile zu .entry-content die auf .entry-content im WP-Editor angewendet werden. 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; } }