How to Make WordPress Editor Look Like Your Front-end Website

The WordPress Editor – that place where you write and format so much of your content – is supposed to be WYSIWYG (“What you see is what you get”). But while it does showcase basic styling in real time, it’s not truly WYSIWYG because the formatting in the Visual tab of your WordPress Editor doesn’t actually match how your content looks on your front-end website. As a result, you’re forced to hit the Preview button over and over to see how your post will look once published. But what if there were a better way? A way that let you skip the incessant alt-tabbing and previewing and see your final product right in the WordPress Editor? There is, and I’m going to show you how to do.
In this post, I’ll show you how to emulate the WordPress front-end inside the WordPress Editor.
You’ll need to get your hands a little dirty…
Unfortunately, unlike customizing the WordPress admin, there aren’t any plugins that will make your WordPress Editor automatically emulate your front-end website. That means you’ll need to dig in and get your hands a little dirty. But I promise you I’ll make this as painless as possible.
Source: https://managewp.org/articles/13993/how-to-make-wordpress-editor-look-like-your-front-end-website
source https://williechiu40.wordpress.com/2016/12/08/how-to-make-wordpress-editor-look-like-your-front-end-website/