TinyMCE Essential Styles ONLY

sage
1

From my understanding and experience the TinyMCE editor imports the entire main.css which can be hefty, and most of the time we don’t need to pass all these styles to TinyMCE as it can be taxing.

For example, my site contains a background image on the body, so now I’m having to write styles to counteract the appearance TinyMCE inherits when in visual editor mode.

I think earlier versions of Sage, only enqueued an editor.css file which made more sense to me. How do we get back to that, and stop passing main.css to the content editor?

2

Revert this commit:

3

Thank you mister @ben!

I also wanted to mention, while this applies to the TinyMCE editor, there’s other styles in the WP admin you might want to tweak.

Maybe there’s a better way, but I’ve added the following to my setup.php file:

function admin_style() {
wp_enqueue_style('sage/admin_style', Assets\asset_path('styles/editor-style.css'), false, null);
}
add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\\admin_style' );
4

html, body {height: 100%}

caused major issues in TinyMCE when it was included. The above function didn’t work for me. I am using version 8.5.1 and ended up commenting out:

//add_editor_style(Assets\asset_path('styles/main.css'));

5

You could also just override that setting in _tinymce.scss. I usually have to override a height or background color in each project. The benefits of seeing most of the actual styles outweigh the minor inconvenience of overriding a few.

6
3 Likes
7

Sorry, I didn’t mention it originally. Commenting out add_editor_style(Assets\asset_path('styles/main.css')); should be a given if you follow Sage’s former implementation:

function admin_style() {
wp_enqueue_style('sage/admin_style', Assets\asset_path('styles/editor-style.css'), false, null);
}
add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\\admin_style' );

Otherwise, you’d still be including your main.css styles into the TinyMCE editor, which defeats the purpose.

There must be some good reason why the Sage developers thought it might be helpful to import the main.css stylesheet. For my purposes it was adding unnecessary bloat and css conflicts.

8

I find that it helps clients and content developers understand what their content will look like when posted. With Sage’s styles in TinyMCE I don’t have to spend training hours explaining…

  1. That floated images have more padding so don’t worry about how it looks here.
  2. H2 is actually italicized so you don’t need to add italics to it
  3. the bullets WILL be blue; they just don’t show up that way in the editor.

These seem minor if you understand how stylesheets work, but to a client who’s used to writing in and editor that shows the correct styles (like Word), WordPress can seem primitive or obtuse when the editor doesn’t match the front end.

So I like having main.css in TinyMCE.

1 Like