TinyMCE content with default application CSS

Question

Dear friends from SO;

I'm not able to find a proper solution to give the contents of the TinyMCE editor the same styles that are used by the main css file. Not to be confused, I'm not trying to change the theme or style the UI components of TinyMCE, but the information typed on it / with it.

At this point TinyMCE solves all my needs, but still, I want the content to look the same way that it will look once published.

I tried adding: "content_css : "custom.css" but it doesn't seems to be working as expected...

  <script language="javascript" type="text/javascript">
    tinyMCE.init({
      selector: "#issue",
      theme : "modern",
      mode : "textareas",
      plugins : "hr, code, wordcount, image, imagetools, table, paste, template",
      /*menubar: "insert,edit",*/
      /*toolbar: "image,paste, hr",*/
      paste_data_images: true,
      content_css : "visual/css/base.css",
      templates: [
        {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
        {title: 'Some title 2', description: 'Some desc 2', url: 'visual/mce/models/devel.html'}
      ]
    });
  </script>

Is there any way to make the content follow the CSS which is used by the main application?

check the network tab to make sure the external css is loading correctly; the paths are relative in a different way than css relative paths. — dandavis
Hi @dandavis, yes, first thing I checked.. it was alright. TinyMCE seems to ignore the parent div id, or class. The most resonable option seems to be to make a custom css for it. I was trying to style it like "div#issue > h1" which is how it's defined in the main css, but seems like it needs it's own rules selecting directly H1 instead of #issue h1. — Chris Russo
yes, your rules in that sheet have to be fairly "bare". the editor actually runs in an iframe that has basically no other wrapper html around the content. you might be able to inject wrapper divs, or maybe a base html doc instead of blank, i'm not sure if that's an option. For our install, I made a few regexps that strip the in-use css into something tinymce-friendly, which allows me to mechanically re-strip if our site's css changes. — dandavis
This seems to be the right answer, yes. "The editor actually runs in an iframe that has basically no other wrapper html around the content." seems like the amount of changes and elements incorporated by the Js, make the CSS paths get lost. — Chris Russo
you might make a mini export of the site css. you likely don't need every little rule. the main things that matter here are font sizes, header spacing, and list indenting. to get a perfect match is likely not worth the effort and maintenance. — dandavis

Spyder Spyder · Accepted Answer · 2019-08-23T13:30:04

Try adding inline: true to your configuration. This will remove all of the iframe wrapping and edit the specified target element directly in the page. Our default (iframe) mode is there to help shield the content in the editor from the surrounding page; for example on a CMS where editing is done in a separate admin interface and you don't want admin-ui styles applying to the content.

It sounds like inline mode will suit your use case better.

TinyMCE content with default application CSS

2 Answers