web-dev-qa-db-fra.com

Comment envelopper le contenu de l'éditeur principal tinyMCE avec des balises supplémentaires

Je suis sur WP 4.6, qui est doté de tinyMCE 4. Je dois rendre le contenu de l'onglet visuel de mon éditeur post plus WYSIWYG. Je joins un fichier CSS contenant mes styles frontaux à l'éditeur à l'aide de add_editor_style. Mais pour que le contenu de l'éditeur prenne beaucoup de ces styles, j'ai également besoin de les envelopper dans deux balises HTML - divs avec des classes particulières.

La documentation de tinyMCE est un peu meilleure qu’elle ne l’était, mais c’est toujours un cauchemar d’essayer de comprendre comment récupérer le contenu et l’envelopper quand il est inséré. J'essaie ce test pour ajouter une chaîne au contenu:

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

Mais cela ne semble pas être la sélection de l'instance tinyMCE de l'éditeur principal de publication. Je ne trouve aucune documentation sur ce qui est pris en charge pour la selector et même si cela est nécessaire. Est-ce que quelqu'un peut-il me montrer la bonne direction?

javascripttinymcehtmlwysiwygpost-editor
2
And Finally

Personnellement, je stylise tout le contenu placé dans l'éditeur WP en utilisant just une classe unique, généralement .entry-content que j'ai utilisée dans l'exemple ci-dessous.

Lors de la sortie du contenu depuis l'éditeur WP au début, je l'enveloppe dans div.entry-content. L'utilisation d'une seule classe HTML simplifie les choses:

style.css 

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

J'utilise également add_editor_style() pour charger la feuille de style par défaut de mon thème dans tinyMCE:

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

J'utilise la fonction wpse247805_editor_styles_class() ci-dessous, qui ajoute simplement la classe .entry-content à l'élément tinyMCE <body>.

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

Parfois, j'estime nécessaire de remplacer les styles appliqués à .entry-content dans l'éditeur WP. J'utilise Sass et j'ai une partie dédiée à cet effet.

// 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