title: Basic text styles
{@snippet features/build-basic-styles-source}
The {@link api/basic-styles basic styles} allows you to start editing right away with all the most used formatting styles inevitable for content creation. This package provides essential text formatting features such as bold, italic, underline, strikethrough, subscript, superscript, and code. Coupled with more formatting features, these serve as a base for any WYSIWYG editor tool set.
All basic text styles can be removed with the {@link features/remove-format remove format} feature.
{@snippet features/basic-styles}
Check out also these CKEditor 5 features to gain better control over your content style and format:
And be sure to get familiar with these, too:
| Style feature | {@link framework/guides/architecture/core-editor-architecture#commands Command} name | {@link builds/guides/integration/configuration#toolbar-setup Toolbar} component name | Output element |
|---|---|---|---|
| {@link module:basic-styles/bold~Bold} | 'bold' |
'bold' |
<strong>bold</strong> |
| {@link module:basic-styles/italic~Italic} | 'italic' |
'italic' |
<i>italic</i> |
| {@link module:basic-styles/underline~Underline} | 'underline' |
'underline' |
<u>underline</u> |
| {@link module:basic-styles/strikethrough~Strikethrough} | 'strikethrough' |
'strikethrough' |
<s>strikethrough</s> |
| {@link module:basic-styles/code~Code} | 'code' |
'code' |
<code>code</code> |
| {@link module:basic-styles/subscript~Subscript} | 'subscript' |
'subscript' |
<sub>subscript</sub> |
| {@link module:basic-styles/superscript~Superscript} | 'superscript' |
'superscript' |
<sup>superscript</sup> |
{@link module:basic-styles/bold~Bold} and {@link module:basic-styles/italic~Italic} are available out–of–the–box in most of the {@link builds/guides/overview editor builds}.
The {@link module:basic-styles/code~Code} feature provides support for inline code formatting. To create blocks of pre-formatted code with a specific programming language assigned, use the {@link features/code-blocks code block feature}.
By default, each feature can upcast more than one type of the content. Here's the full list of elements supported by each feature, either when pasting from the clipboard, loading data on start or using the {@link module:core/editor/utils/dataapimixin~DataApi#setData data API}.
| Style feature | Supported input elements |
|---|---|
| {@link module:basic-styles/bold~Bold} | <strong>, <b>, <* style="font-weight: bold"> (or numeric values that are greater or equal 600) |
| {@link module:basic-styles/italic~Italic} | <i>, <em>, <* style="font-style: italic"> |
| {@link module:basic-styles/underline~Underline} | <u>, <* style="text-decoration: underline"> |
| {@link module:basic-styles/strikethrough~Strikethrough} | <s>, <del>, <strike>, <* style="text-decoration: line-through"> |
| {@link module:basic-styles/code~Code} | <code>, <* style="word-wrap: break-word"> |
| {@link module:basic-styles/subscript~Subscript} | <sub>, <* style="vertical-align: sub"> |
| {@link module:basic-styles/superscript~Superscript} | <sup>, <* style="vertical-align: super"> |
CKEditor 5 allows for typing both at inner and outer boundaries of code to make the editing easier for the users.
To type inside a code element, move the caret to its (start or end) boundary. As long as the code remains highlighted (by default: less transparent gray), typing and applying formatting will be done within its boundaries:
{@img assets/img/typing-inside-code.gif 770 The animation showing typing inside the code element in CKEditor 5 rich text editor.}
To type before or after a code element, move the caret to its boundary, then press the Arrow key (→ or ←) once. The code is no longer highlighted and whatever text you type or formatting you apply will not be enclosed by the code element:
{@img assets/img/typing-after-code.gif 770 The animation showing typing after the code element in CKEditor 5 rich text editor.}
To add the basic styles features to your editor install the @ckeditor/ckeditor5-basic-styles package:
npm install --save @ckeditor/ckeditor5-basic-styles
And add the plugins which you need to your plugin list. Then, simply configure the toolbar items to make the features available in the user interface.
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript ],
toolbar: {
items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code','subscript', 'superscript' ]
}
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
Each style feature registers a command which can be executed from code. For example, the following snippet will apply the bold style to the current selection in the editor:
editor.execute( 'bold' );
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-basic-styles.