Contribute to this guideReport an issue

Basic Text Styles: Bold, Italic and More Documentation

Basic text styles are provided through the Basic Styles plugin which is available in all official CKEditor 4 distributions (Basic, Standard, Full), although some text style buttons are disabled in the Basic and Standard preset.

When the plugin is enabled, the  ,  ,  ,  ,   and   buttons are automatically added to the toolbar. You can use them to add some basic inline text formatting to your document. If you want to quickly remove basic styles from your document, use the   button provided by the Remove Format plugin.

Basic text styles work on text selections; check the text formats feature for block-level text formatting.

Default Basic Text Styles

The Basic Styles plugin adds the bold, italic, underline, strikethrough, subscript and superscript features, as visible in the editor instance below. In some editor distributions (Basic, Standard) a few of these features are disabled, though; refer to the Basic Styles: Bold, Italic and More documentation for more information on how to enable them.

Custom Basic Text Styles Definition

Basic text styles can be output in HTML in different ways. For example, the Bold feature can be implemented as <strong>, <b>, <span style="font-weight: bold;"> or <span class="Bold">. Refer to the Basic Text Styles: Bold, Italic and More article for more information on how to customize the output of this feature.

The editor instance below, for example, outputs bold with the <b> and italic with the <i> element. Click the   Source buttons of both editor instances available on this page to compare the source code and see how the same text formatting can be achieved with different style definitions.

Custom basic style definitions are automatically integrated with Advanced Content Filter and are treated as allowed by the editor content filtering mechanism.

Related Features

Get Sample Source Code

  • Default basic text styles
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Default basic text styles</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', {
          height: 200,
          // By default, some basic text styles buttons are removed in the Standard preset.
          // The code below resets the default config.removeButtons setting.
          removeButtons: '',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>
  • Custom basic text styles definition
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Custom basic text styles definition</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', {
          height: 200,
          // By default, some basic text styles buttons are removed in the Standard preset.
          // The code below resets the default config.removeButtons setting.
          removeButtons: '',
          removeButtons: 'PasteFromWord',
          // Custom style definition for the Bold feature.
          coreStyles_bold: {
            element: 'b',
            overrides: 'strong'
          },
          // Custom style definition for the Italic feature.
          coreStyles_italic: {
            element: 'i',
            overrides: 'em'
          }
        });
      </script>
    </body>
    
    </html>