CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Applying Styles to Editor Content Documentation

The Styles drop-down list contains styles that you can apply to editor content in order to assign semantic value to the text you are creating in CKEditor 4. It is provided by the Styles Combo plugin which by default is available in the Standard and Full distributions.

When the Styles Combo plugin is enabled, the button is automatically added to the toolbar. Once clicked, it opens a drop-down list with styles that can be applied to your content. The styles are categorized into groups, depending on their target, so you can use block, inline, object and widget styles for the content that you are creating. If you want to quickly remove inline and object styles from your document, use the   button provided by the Remove Format plugin.

Default Styles Combo Plugin Implementation

Please note that the default styles available in the drop-down list are defined in the styles.js file and are just examples which will not work without the matching contents.css file. They will also not work in the inline editor which uses page stylesheets instead of the contents.css file. Refer to the Applying Styles to Editor Content article to learn more about this feature.

Widget Styles

Widgets are special rich content units and therefore standard styles (like block or object ones) cannot be applied to them. Only styles of a special type ('widget') work with widgets. The styles are defined for particular widget types and more than one style can be applied to a widget instance. Refer to the Widget Styles section for more information.

The editor below presents widget styles for the enhanced image, embedded media and mathematical formulas.

Stylesheet Parser Plugin

The optional Stylesheet Parser plugin fills the Styles drop-down list based on the CSS rules available in the stylesheet defined in the config.contentsCss option.

A few configuration options are available to fine-tune this feature, including using regular expressions to choose or limit CSS selectors that will be available for editor content. Refer to the Stylesheet Parser documentation to learn more about this feature.

Note: The default styles configuration was cleared in the editor instance below. The default styles are thus not applied to editor content and the only styles available in the Styles drop-down are those coming from the document stylesheet provided in the editor configuration.

Related Features

Get Sample Source Code

  • Default Styles Combo plugin implementation 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Default Styles Combo plugin implementation</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      extraPlugins: 'widget',
      height: 300,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Widget styles 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Widget styles</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor2', {
      extraPlugins: 'autoembed,embedsemantic,image2,mathjax,codesnippet,font',
      removeButtons: 'Font, PasteFromWord',
      height: 300,
      mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
    });
  </script>
</body>

</html>
  • Stylesheet Parser plugin 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Stylesheet Parser plugin</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor3', {
      extraPlugins: 'stylesheetparser',
      height: 300,

      // Custom stylesheet for editor content.
      contentsCss: [
        'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/stylesheetparser/stylesheetparser.css'
      ],

      // Do not load the default Styles configuration.
      stylesSet: [],
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>