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.

<h1>Apollo 11</h1>

Apollo 111&nbsp;was the spaceflight that landed the first
				humans, Americans Neil Armstrong and Buzz
				Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first
				to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.
				Armstrong spent about <s>three and a half</s> two and a half hours outside the
				spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return
				to Earth. A third member of the mission, Michael Collins, piloted the
				command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
				<h2>Broadcasting and quotes <a id="quotes" name="quotes"></a></h2>
				Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the
				event as:
				<blockquote>
				One small step for [a] man, one giant leap for mankind.
				</blockquote>
				Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961
				by the late U.S. President John F. Kennedy in a speech before the United States Congress:
				<blockquote>
				[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.
				</blockquote>
				<hr />
				1&nbsp;Source:
				<a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a>

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 , ,  or . 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  and italic with the  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.

<h1>Apollo 11</h1>
				Apollo 111 was the spaceflight that landed the first humans, Americans
				Neil Armstrong and Buzz Aldrin, on the Moon on
				July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on
				July 21 at 02:56 UTC.
				Armstrong spent about <s>three and a half</s> two and a half hours outside the
				spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to
				Earth. A third member of the mission, Michael Collins, piloted the command spacecraft
				alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
				<h2>Broadcasting and quotes <a id="quotes" name="quotes"></a></h2>
				Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event
				as:
				<blockquote>
				One small step for [a] man, one giant leap for mankind.
				</blockquote>
				Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961 by
				the late U.S. President John F. Kennedy in a speech before the United States Congress:
				<blockquote>
				[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.
				</blockquote>
				<hr />
				1&nbsp;Source:
				<a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a>

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>