2

I'm on WP 4.6, which has tinyMCE 4. I need to make the contents of my post editor visual tab more WYSIWYG. I'm attaching a CSS file containing my front end styles to the editor using add_editor_style. But for the contents of the editor to take on many of those styles I also need to wrap them in a couple of HTML tags - divs with particular classes.

The tinyMCE documentation is a bit better than it used to be, but it's still a nightmare trying to figure out how to grab the content and wrap it when tinyMCE inits. I'm trying this test to append a string to the content:

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

But this doesn't seem to be selecting the tinyMCE instance of the main post editor. I can't find any documentation on what is supported for the selector, and even whether it is necessary. Can anyone point me in the right direction?

|improve this question
2

Personally, I style all of the content placed within the WP Editor using just a single class, typically .entry-content which I've used in the example below.

When outputting the content from the WP Editor on the front end, I wrap it in div.entry-content. Using a single HTML class simplifies things:

style.css

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

I'm also using add_editor_style() to load my theme's default stylesheet into 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' );

I use the wpse247805_editor_styles_class() function below, which simply adds the .entry-content class to the tinyMCE <body> element.

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

Sometimes I find it necessary to override the styles applied to .entry-content inside of the WP Editor. I use Sass and I have a partial dedicated for this purpose. 

// 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;
    }
}
|improve this answer
  • 1
    Thanks, this is an interesting method that would work in some cases - in my situation I've got a lot of pre-existing CSS I need to make work in the post editor, and adding the required HTML tags would enable me to do it without changing the CSS. I'll give it a while to see if anybody else has succeeded in doing the same thing - if not I'll take this answer, thanks! – And Finally Nov 30 '16 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.