Include inline CSS for the Wordpress tinyMCE editor by Shu Miyao

Posted on 28 March, 2018


Skipping to the conclusion, we can use a code as follows suggested in this Wordpress trac issue.

<?php

/**
 * Adds inline style to TinyMCE.
 *
 * Please never use this in production.
 *
 * @param array $settings TinyMCE settings
 * @return array
 */
function wptrac_36636_editor_inline_style( $settings ) {
        $settings['content_style'] = '* {outline: 1px solid red;}';

        return $settings;
}

add_filter( 'tiny_mce_before_init', 'wptrac_36636_editor_inline_style' );

But there s one more small tip which I had to spend some good hours on. I thought that it might be helpful to someone.When there is anything wrong with the value of $settings['content_style'], TinyMCE does not seem to work because of errors:

Uncaught SyntaxError: Unexpected identifier
post.php?post=18406&action=edit:16735
Uncaught ReferenceError: tinyMCEPreInit is not defined
 at post.php?post=18406&action=edit:16735

I found out that TinyMCE would not work when the value of content_style has double quotes or new lines. You need to replace double quotes with single quotes, and new line with space.