Quickly and easily you can improve the look of the TinyMCE editor by simply adding the same styles on the front-end of your website to the editor. Here’s how!

Enable the Stylesheet

To enable the TinyMCE editor style, add the add_editor_style() function to your theme’s functions.php file.

<?php add_editor_style(); ?>

By default, WordPress will look for editor-style.css if no argument is provided. You can give it a different name if you like:

add_editor_style( 'editor.css' );

You can also specify a different path or even pass an array.

Create the Stylesheet

Next, create the file for your editor’s stylesheet. If you would like to control how much width the content in the editor takes up, you can set the width of the editor:

#tinymce {
	font-family: sans-serif;
	width: 800px;
}

Following that, you can add the styles of your website for headings, paragraphs, links, lists, etc., so you get a better representation of what the page will look like on the front-end. Make sure to use pixel values for font sizes so they are not relative to the font size set on TinyMCE’s body.