CODEWITHSUNDEEP
javascripthtmlcsstinymcetinymce-4
Chris Russo
Chris Russo

Reputation: 480

TinyMCE content with default application CSS

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?

Upvotes: 0

Views: 1757

Answers (2)

Spyder
Spyder

Reputation: 1902

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.

Upvotes: 1

Chris Russo
Chris Russo

Reputation: 480

Thanks to @dandavis for his answer.

The editor seems to create multiple elements (including an iframe) around the content, therefore, the CSS selectors used by the main application doesn't seem to apply properly.

My approach here is to clone the main elements used inside TinyMCE, on a new css file, exclusively for the editor, and incorporating the style with the content_css argument, eg:

 /*create a custom tailored css for TinyMCE content here*/
 content_css : "visual/css/base.css",

Upvotes: 1

Related Questions