Remove body margin on TinyMCE

0
votes

I'm using TinyMCE for a content editor and it adds an 8px margin to the body.

I've went into the stylesheets and changed the body margins to 0, even added body { margin:0 !important; }, but it will not remove it.

It says it's coming from content.css line 1 but Firefox inspection tool will not tell me which one...

I've also tried using jQuery $('iframe body').css('margin','0'); and $('iframe').contents().find('body').css('margin','0');

The TinyMCE loads as an iframe, thus causing problems.

Requested HTML

<iframe id="content_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
#document
<!DOCTYPE >
  <html>
   <head xmlns="http://www.w3.org/1999/xhtml">
   </head>
     <body id="tinymce" class="mceContentBody " contenteditable="true" onload="window.parent.tinyMCE.get('content').onLoad.dispatch();" spellcheck="false" dir="ltr">

Here's the starting HTML.

3
iframetinymce
can you show some html? - Agustin Meriles

3 Answers

0
votes

Use the conent_css setting that tinymce provides.

0
votes

I got tired of fighting the CSS so I went through the source code. Line 13721 has a place where the body and head are printed in (more/less) HTML. Added an inline style in the compressed version in the same spot (all one line, but halfway down or so). Fixed it right up!

0
votes

For those who are still fighting this and are using tinymce v4+, this is probably a little cleaner/easier than trying to edit the js source code directly:

The first few characters of skins/lightgray/content.min.css look like this:

body{background-color:#fff;font-family: ...

Change to (just add the margin rule at the front):

body{margin:0;background-color:#fff;font-family: ...

Then clear your cache and you're good to go!