Would it be possible to target the entire TinyMCE editor in order to apply some styling, such as adding 10px of padding around it? I'm using TinyMCE 4 and starting with the HTML code shown below results in TinyMCE generating additional HTML.
I would like to style the complete TinyMCE editor, specifically #mce_9. However, #mce_9 is an automatically assigned ID by TinyMCE, and I prefer not to hardcode it into my CSS. The body_id and body_class properties provided by TinyMCE only allow me to target the internal iframe, not the entire editor.
tinyMCE.init({
selector: "#frontContent",
//body_id:"frontContentWindow"
});
Original HTML content before applying TinyMCE:
<div id="content">
<div id="frontContent">BLA BLA BLA</div>
</div>
Updated HTML after implementing TinyMCE:
<div id="content">
<div tabindex="-1" hidefocus="1" class="mce-tinymce mce-container mce-panel" id="mce_9" style="visibility: hidden; border-width: 1px; width: 600px;">
<div class="mce-container-body mce-stack-layout" id="mce_9-body">
....
</div>
</div>
<div id="frontContent" style="display: none;" aria-hidden="true">BLA BLA BLA</div>
</div>