Adding or changing the editor content CSS
Add CSS and styles to the editor
content_css
The content_css
option loads the specified CSS files into the editable area.
Type: String
, Array
This option is intended for use with TinyMCE’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 TinyMCE is rendered in, not using the content_css option.
|
TinyMCE comes with six content CSS files:
-
default
-
dark
-
document
-
writer
-
tinymce-5
-
tinymce-5-dark
These content CSS files can be enabled in the editor using the content_css
configuration option.
For example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_css: 'writer'
});
These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: tinymce-dist GitHub Repository - Content CSS files.
Tiny also provides content CSS files with the enhanced skins, for a list of premium content CSS files, see: Enhanced Skins & Icon Packs.
Tiny recommends using the same CSS for both the editor and the page where the editor content will be rendered.
If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE 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 TinyMCE 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()
});
To remove the margins between paragraphs (sometimes requested for using TinyMCE in email clients), add the following style to the content CSS:
|
content_css_cors
When content_css_cors
is set to true
, the editor will add a crossorigin="anonymous"
attribute to the link tags that the StyleSheetLoader uses when loading the content_css
. This allows you to host the content_css
on a different server than the editor itself.
Type: Boolean
Default value: false
Possible values: true
, false
content_style
This option allows custom CSS styles to be set as a string. The styles are injected into the head
of the page containing the editable area. In TinyMCE’s classic mode, it is injected into the head
of TinyMCE’s iframe. In inline mode, it is injected into the head
of the page TinyMCE is rendered in.
Type: String
content_style styles are not saved within TinyMCE’s content. If they are needed for display purposes, ensure the styles are also included in the page the content will be displayed on.
|
Add fonts to the editor
font_css
The font_css
option loads the specified font CSS files into both the editable area and the webpage TinyMCE is rendered in.
Font CSS files should only contain CSS for specifying custom fonts using the @font-face
and related CSS rules.
To allow users to apply the fonts added though font_css , update the fonts list using the font_family_formats option.
|
Type: String
, Array
This option is intended for use with TinyMCE’s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant font CSS files should be loaded as part of the webpage TinyMCE is rendered in, not using the font_css option.
|
If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE is rendered in.
Absolute path example
// File: http://domain.mine/mysite/index.html
tinymce.init({
selector: 'textarea', // change this value according to your HTML
font_css: '/myFont.css' // resolved to http://domain.mine/myFont.css
});
Relative path example
// File: http://domain.mine/mysite/index.html
tinymce.init({
selector: 'textarea', // change this value according to your HTML
font_css: 'myFont.css' // resolved to http://domain.mine/mysite/myFont.css
});
To load multiple font CSS files, provide the paths as either a array of strings or a comma-separated string.
Add attributes to the editor body
body_class
Use the body_class
option to add a class to the body of each editor instance. This class can be used to override the styles added by the content_css
option. The body_class
will be removed if the editor is removed and will not be included in any content retrieved from the editor.
Type: String
Example: using body_class
This will add the same class to all editors that gets created by the init
call.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_class: 'my_class'
});
This will set specific classes on the bodies of specific editors.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_class: 'elm1=my_class, elm2=my_class'
});
body_id
This option enables you to specify an id for the body of each editor instance. This id can then be used to do TinyMCE specific overrides in your content_css
.
Type: String
Example: using body_id
This will add the same id to all editors that gets created by the init
call.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_id: 'my_id'
});
This will set specific ids on the bodies of specific editors.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_id: 'elm1=my_id, elm2=my_id2'
});
Importing complex CSS
The Import CSS plugin assists with importing complex CSS into the editor text area. For information on using the Import CSS plugin, see: The Import CSS plugin.