| title | Basic text styles |
|---|---|
| meta-title | Basic text styles | CKEditor 5 Documentation |
| category | features |
The basic styles feature lets you apply the most essential formatting such as bold, italic, underline, strikethrough, subscript, superscript, and code. Coupled with more formatting features, these serve as a base for any WYSIWYG editor toolset.
You may apply basic formatting options with toolbar buttons. You can also make use of the {@link features/autoformat autoformatting feature} that changes Markdown code to formatted text as you type. Use one of these to format text:
- Bold – Use the bold toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/bold.svg Bold} or type
**text**or__text__. - Italic – Use the italic toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/italic.svg Italic} or type
*text*or_text_. - Code – Use the code toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/code.svg Code} or type
`text`. - Strikethrough – Use the strikethrough toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/strikethrough.svg Strikethrough} or type
~~text~~.
{@snippet features/basic-styles}
This demo presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action.| Style feature | {@link framework/architecture/core-editor-architecture#commands Command} name | {@link getting-started/setup/toolbar 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> |
By default, each feature can upcast more than one type of content. Here is 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/editor~Editor#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 the inner and outer boundaries of code to make 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.}
By default, the {@link module:basic-styles/subscriptSubscript subscript} and {@link module:basic-styles/superscriptSuperscript superscript} features are mutually exclusive: applying one to text that already has the other replaces it, matching the behavior of common word processors. Toggling a style off does not affect the other style.
To allow nesting, set the allowNesting option on either feature under the basicStyles configuration namespace:
ClassicEditor
.create( {
// ... Other configuration options ...
basicStyles: {
superscript: {
allowNesting: true
}
}
} )
.then( /* ... */ )
.catch( /* ... */ );The flag is symmetric: setting basicStyles.superscript.allowNesting or basicStyles.subscript.allowNesting to true disables the mutual exclusion for both commands.
After {@link getting-started/integrations-cdn/quick-start installing the editor}, 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.
```js import { ClassicEditor, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from 'ckeditor5';ClassicEditor .create( { licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'. plugins: [ Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline ], toolbar: { items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript' ] } } ) .then( /* ... / ) .catch( / ... */ );
</code-switcher>
## Related features
Check out also these CKEditor 5 features to gain better control over your content style and format:
* {@link features/font Font styles} – Easily and efficiently control the font {@link features/font#configuring-the-font-family-feature family}, {@link features/font#configuring-the-font-size-feature size}, {@link features/font#configuring-the-font-color-and-font-background-color-features text or background color}.
* {@link features/style Styles} – Apply pre-configured styles to existing elements in the editor content.
* {@link features/text-alignment Text alignment} – Because it does matter whether the content is left, right, centered, or justified.
* {@link features/case-change Case change} – Turn a text fragment or block into uppercase, lowercase, or title case.
* {@link features/code-blocks Code blocks} – Insert longer, multiline code listings, expanding the inline code style greatly.
* {@link features/highlight Highlight} – Mark important words and passages, aiding a review or drawing attention to specific parts of the content.
* {@link features/format-painter Format painter} – Easily copy text formatting and apply it in a different place in the edited document.
* {@link features/autoformat Autoformatting} – Format the text on the go with Markdown code.
* {@link features/remove-format Remove format} – Easily clean basic text formatting.
<info-box info>
You can remove all basic text styles with the {@link features/remove-format remove format} feature.
</info-box>
## Common API
Each style feature registers a [command](#available-text-styles) which can be executed from code. For example, the following snippet will apply the bold style to the current selection in the editor:
```js
editor.execute( 'bold' );
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-basic-styles.