Skip to content

content_css.adoc

Latest commit

 

History

History
96 lines (72 loc) · 2.87 KB

content_css.adoc

File metadata and controls

96 lines (72 loc) · 2.87 KB

content_css

The content_css option loads the specified CSS files into the editable area.

Type: String, Array

Default value: ['default'] for classic mode, [] for inline mode

Note
 This option is intended for use with {productname}'s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant CSS stylesheets should be loaded as part of the webpage {productname} is rendered in, not using the content_css option.

If a relative path is specified, it will be resolved in relation to the URL of the webpage {productname} is rendered in.

Absolute path example

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});

Relative path example

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'mycontent.css'  // resolved to http://domain.mine/mysite/mycontent.css
});

To load multiple stylesheets, provide the paths as either a array of strings or a comma-separated string.

Using multiple stylesheets example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'mycontent.css,mycontent2.css'  // includes both CSS files in header
});

Using multiple stylesheets as array example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: [ 'mycontent.css', 'mycontent2.css' ]  // includes both CSS files in header, ability to have CSS with `,` in URL
});

Browser caching

Browser caching might cause {productname} to not read the contents of a changed CSS file. You’ll see "old" colors & styles.

One solution is to manually clear the browser cache when the file for content_css or editor_css has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present time stamp like "myFile.css?bogus=10023561235". Possible solutions could look like this:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myfile.css?' + new Date().getTime()
});
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myscript.php?myParam=myValue&bogus=' + new Date().getTime()
});
Tip

To remove the margins between paragraphs (sometimes requested for using {productname} in email clients), add the following style to the content CSS:

/*
 Removes margins on paragraphs,
 might be useful for mail clients
*/
p { margin: 0 }