The filter that is used for this example is ‘wysiwyg_tinymce_settings‘. This filter makes it possible to edit the TinyMCE settings immediately before the field is initialized. What I decided to do was to make use of the existing CSS wrapper field in the ACF admin:
Then, using the previously mentioned filter, I grab those values and apply them to the WYSIWYG editor’s iframe body tag:
Now, if I specify the correct class names within my ‘editor-styles.css’ file, the editor will get the custom styling I’ve set.
Now I can easily style all the ACF WYSIWYG fields in my admin so that they exactly reflect how the content will look on the front end.
The full code is available on Github.