Basic text styles

The basic styles package provides text formatting features such as bold, italic, underline, strikethrough, subscript, superscript, and code.

# Demo

# Available text styles

Style feature	Command name	Toolbar component name	Output element
Bold	'bold'	'bold'	<strong>bold</strong>
Italic	'italic'	'italic'	<i>italic</i>
Underline	'underline'	'underline'	<u>underline</u>
Strikethrough	'strikethrough'	'strikethrough'	<s>strikethrough</s>
Code	'code'	'code'	<code>code</code>
Subscript	'subscript'	'subscript'	<sub>subscript</sub>
Superscript	'superscript'	'superscript'	<sup>superscript</sup>

# Supported input

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 data API.

Style feature	Supported input elements
Bold	<strong>, <b>, <* style="font-weight: bold">
Italic	<i>, <em>, <* style="font-style: italic">
Underline	<u>, <* style="text-decoration: underline">
Strikethrough	<s>, <del>, <strike>, <* style="text-decoration: line-through">
Code	<code>, <* style="word-wrap: break-word">
Subscript	<sub>, <* style="vertical-align: sub">
Superscript	<sup>, <* style="vertical-align: super">

# Installation

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 ],
        image: {
            toolbar: [ 'bold', 'italic', 'underline', 'strikethrough', 'code','subscript', 'superscript'  ]
        }
    } )
    .then( ... )
    .catch( ... );

# Common API

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' );

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-basic-styles.