Start trial
Plans & PricingContact Us
Log InStart For Free

TinyMCE CSS and custom styles

October 14th, 2020

4 min read

A crystal ball on top of illuminated squares.

Written by

Ben Long

Category

World of WYSIWYG

It’s WYSIWYG, but it’s not psychic 🔮

TinyMCE is a WYSIWYG editor, which means that “What You See” in the editor “Is What You Get” in your published content. However, we don’t know exactly “what you want”, so we bundle TinyMCE with some default content styles to get you started, and provide you with everything you need to customize it further from there.

You can keep working with the default styles; however, to provide your users with the full WYSIWYG experience, you might prefer to customize the styles of the content within the editor to better match your published content.

In this article, we provide an overview of how to configure and customize TinyMCE CSS, covering:

  • The default TinyMCE CSS
  • Predefined stylesheets for TinyMCE
  • How to use your own custom styles within the editor
  • How to customize styles when using TinyMCE in inline mode (because that scenario requires you to do things a little differently)

We’re assuming you’ve already got an instance of TinyMCE up and running and you already know how to configure the editor by modifying the initialization script.

Default TinyMCE CSS

TinyMCE is shipped with a default stylesheet that determines what the font and everything else looks like in the editable area itself.

View the default TinyMCE CSS.

TinyMCE initialized with the default CSS.

Predefined TinyMCE stylesheets

There are four stylesheets provided with TinyMCE out of the box:

  • default - the default CSS applied when no style is explicitly configured (mentioned above)
  • dark - used in conjunction with a dark skin to provide a dark mode
  • writer - providing wider margins on the left and right sides of the editable area
  • document - applying wider margins on all sides (including top and bottom) and frames the page on a grey canvas for an experience more like Word and Google Docs

You can apply any of the provided stylesheets using the content_css config option; for example:

tinymce.init({
  /* ... */ content_css: "document",
});

Customizing TinyMCE CSS

However, for even more control over the styles used in the editor, you can provide your own styles. For example, you might want to customize the styles so they more closely match that of your published content - for the full WYSIWYG experience.

There are two config options you can use to customize the styles of the content that appears in the editor (discussed in more detail in the sections below):

Custom styles with content_css

In addition to loading predefined stylesheets, the content_css option can also be used to load one or more specific stylesheets; for example:

tinymce.init({
  /* ... */ content_css: "/mycontent.css",
});

If mycontent.css were to contain the following CSS...

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

body { 
  color: #0C74DB; 
  background-color: #d8e3fa; 
  font-family: 'Josefin Sans', sans-serif; 
  line-height: 1.4;
}

...the editor would then be initialized as follows:

TinyMCE initialized with custom CSS.

Before we move on, it’s also useful to know that content_css can take multiple stylesheets as an array; for example:

tinymce.init({
  /* ... */
  content_css: [
    "/mycontent.css",
    "https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap",
  ],
});

Custom styles with content_style

Regardless of whether you’re using the default CSS or you’ve specified one or more of your own stylesheets with content_css, the content_style option can be used to tweak (or override) these styles. Personally, I find this really useful for setting up simple examples for demos and testing.

For example:

tinymce.init({
  /* ... */ content_style: "body { color: red; }",
});

Applying styles to your published content

Regardless of the approach taken, remember these styles are for the content as it appears in the editor only. If you want the same styles to be applied to the content where it appears for consumption, you’ll need to apply them there too.

It can be a good idea to base the editor CSS on your site/app CSS for the full WYSIWYG experience. You could possibly refer to the one CSS file for both the editor and your application to avoid duplication (and potential inconsistencies).

Styling TinyMCE in inline mode

When using TinyMCE in inline mode, we recommend you DO NOT use either of the options above.

When running TinyMCE in inline mode, it works a little differently - it takes on the CSS applied to the page it’s on. If you customize the CSS using either of the options above, you risk it interfering with and overriding the page styles.

Instead, if you want to customize the content within the editable area, we recommend adding a class to the div the editor is initialized on, and styling that class, as demonstrated here:

Check out our related articles:

Customizing skins

It’s only natural when you’re thinking about customizing the editor content, that you might also be interested in customizing the overall appearance of the editor itself.

Check out our article on how to customize TinyMCE skins and icons. You can also create your own skins using the TinyMCE skin tool.

TinyMCE with custom skin and icons, and toolbar options grouped on the bottom.

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get started with a free API key - you’ll also get a 14-day trial of our premium plugins!

ConfigurationCSSDesignHTML
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • World of WYSIWYGDec 10th, 2024

    TinyMCE's Latest Releases

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.