Editor toolbar

The toolbar is the most basic user interface element of the WYSIWYG editor that gives convenient access to all its features. It contains various items like buttons or dropdowns that you can use to format, manage, insert and alter elements of the content.

Toolbar configuration is a strict UI-related setting. Removing a toolbar item does not remove the feature from the editor internals. If your goal with the toolbar configuration is to remove features, the right solution is to also remove their respective plugins. Check removing features for more information.

In the builds that contain toolbars an optimal default configuration is defined for it. You may need a different toolbar arrangement, though, and this can be achieved through configuration.

Each editor may have a different toolbar configuration scheme, so it is recommended to check its documentation. In any case, the following example may give you a general idea:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'link', 'undo', 'redo', 'numberedList', 'bulletedList' ]
    } )
    .catch( error => {
        console.log( error );
    } );

# Demo

This is how a simplified toolbar from the snippet above looks in the CKEditor 5 WYSIWYG editor user interface. Toolbar items can be easily added or removed thanks to this configuration.

Rich Text Editor

The Red Planet is a target that has been aimed at for decades. Both Soviet (later Russian) and American designers looked at the sky and planned. Valeri Polyakov spent almost 438 days during a single long-term mission onboard the Mir space station to test the ability of humans to thrive in space for long periods of time. It was twenty years ago. The experiments he carried out, the research and all scientific data are still patiently waiting. They are evaluated, researched, re-read again and again, as people near the day they will launch a manned spacecraft toward Mars, the Moon, or the cislunar orbit.

You can use '|' to create a separator between groups of toolbar items. It works in both the basic and extended configuration formats:

Basic:

toolbar: [ 'bold', 'italic', '|', 'undo', 'redo', '|', 'numberedList', 'bulletedList' ]

Extended:

toolbar: {
    items: [ 'bold', 'italic', '|', 'undo', 'redo', '|', 'numberedList', 'bulletedList' ]
}

Below you can find an example of a simple toolbar with button grouping. The group separators ('|') set in the configuration help organize the toolbar.

Rich Text Editor

The Soviets have been winning in everything concerning the space race up until the American Moon landing in 1969. They beat the Americans with the first manned spaceflight, the first woman in space (and for almost twenty more years the only one), the first multicraft flight, and finally — the first group flight. They left Americans on the scorched ground, even if sometimes just by weeks or even days. And in the course of racing the hideous imperialist capitalist to the Silver Globe they achieved one more outstanding success — the first orbital docking between two manned spaceships and a successful orbital crew transfer which let to the launch of world's first-ever orbital station Salyut 1 and taking back the lead in 1971.

You can use the extended toolbar configuration format to access additional options:

toolbar: {
    items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
    viewportTopOffset: 30,
    shouldNotGroupWhenFull: true
}

items – An array of toolbar item names. Most of the components (buttons, dropdowns, etc.) which can be used as toolbar items are described under the Features tab. A full list is defined in editor.ui.componentFactory and can be listed using the following snippet: Array.from( editor.ui.componentFactory.names() ). Besides button names, you can also use the dedicated separators for toolbar groups ('|') and toolbar lines ('-').
removeItems – An array of toolbar item names. With this setting you can modify the default toolbar configuration without the need of defining the entire list (you can specify a couple of buttons that you want to remove instead of specifying all the buttons you want to keep). If, after removing an item, toolbar will have two or more consecutive separators ('|'), the duplicates will be removed automatically.
viewportTopOffset – The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the toolbar offset, the toolbar will not be positioned underneath or above the page’s UI.
shouldNotGroupWhenFull – When set to true, the toolbar will stop grouping items and let them wrap to the next line when there is not enough space to display them in a single row. This setting is false by default, which enables items grouping.

The demo below presents the “regular” toolbar look with shouldNotGroupWhenFull set to false. If there are excess toolbar items for the display width, the toolbar gets grouped and some of the items are accessible via the clickable “Show more items” (⋮) button.

Rich Text Editor

The space race

It is no longer a secret — though it was for a long time — that the Soviet Union raced the United States to the Moon and only aknowledging the failure did they focus all their brilliant minds and hard work on the orbital station program known widely as Salyut. The reason for their lunar failure — we learned that only in the late 1990’s after the fall of USSR — was the lack of a proper plan. And, as some sources suggest, the absence of a real need to achieve that goal. It was the US president’s challenge, cast in front of an audience, that the Americans will put a man on the face of Luna before the end of the decade. The Soviets, who have so far been winning in everything concerning the space race, felt obliged to accept the challenge.

So what made the Soviets fail? Why did the N1 monster rocket never leave low earth orbit and why did the Lunniy Korabl never reach the surface of our natural satellite? I believe it was because the Soviets never planned to go there in the first place. The greatest minds of that nation were involved, but the undertaking had no heart. And no real favors on the part of the Communist Party. No passion, no fire, no feeling to take that Soviet Man, grab him with the mighty hand formed from the collective effort of the workers and scientists, and cast him into orbit like a gauntlet cast in the face of the American opponent. And most of all — no time. They were so behind their counterparts from the USA that they just could not make up the lost time.

In the extended toolbar configuration format it is also possible to arrange toolbar items into multiple lines. Here is how to achieve this:

Set the shouldNotGroupWhenFull option to true, so items will not be grouped when the toolbar overflows but will wrap to the new line instead.
Additionally, the '-' separator can be used inside the items list to set the breaking point explicitly.

toolbar: {
    [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
    shouldNotGroupWhenFull: true
}

When shouldNotGroupWhenFull is set to true, by default the toolbar items are automatically wrapped into a new line once they do not fit the editor width. The mechanism is automatic and only wraps excess items. Notice that while the toolbar group separators '|' are preserved, the groups may be split when they overflow.

toolbar: {
    items: [
        'heading', '|',
        'fontfamily', 'fontsize', '|',
        'alignment', '|',
        'fontColor', 'fontBackgroundColor', '|',
        'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
        'link', '|',
        'outdent', 'indent', '|',
        'bulletedList', 'numberedList', 'todoList', '|',
        'code', 'codeBlock', '|',
        'insertTable', '|',
        'uploadImage', 'blockQuote', '|',
        'undo', 'redo'
    ],
    shouldNotGroupWhenFull: true
}

See how it works in practice. You may play with the browser window width to see how the buttons behave when the toolbar gets wrapped into multiple lines.

Rich Text Editor

The space stations

The Soviet Salyut space station line was, in fact, two different programs. One was a military Almaz programme with OPS station design, and the other was civilian Salyut with their DOS design. The DOS was, in fact, the hull of an OPS outfitted with additional hardware. The original OPS was designed in the mid-1960’s by the OKB-52 secret facility lead by Chelomei. As they struggled with funding and fell behind schedule, the original design was “borrowed” by engineers from OKB-1, lead by Korolev.

His people used Chelomei’s main hull and outfitted it with the engines, solar panels, and docking and transfer systems from their own space craft, Soyuz (which was, primarily, developed to fly to the Moon; once it never did, it flew to low Earth orbit in 1967 and still does so, ferrying astronauts and cosmonauts to the ISS in 2021!). Korolev’s people used somebody else’s experience, but did their own work, and in 1971 for the first time in history they put a space base in orbit. And manned it. And it was a success.

# Explicit wrapping breakpoint

Setting an explicit break point in the toolbar configuration with '-' lets you create your own predefined multiline toolbar configuration. Toolbar items will then be grouped and put in lines as declared in the configuration.

toolbar: {
    items: [
        'heading', '|',
        'alignment', '|',
        'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
        'link', '|',
        'bulletedList', 'numberedList', 'todoList',
        '-', // break point
        'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|',
        'code', 'codeBlock', '|',
        'insertTable', '|',
        'outdent', 'indent', '|',
        'uploadImage', 'blockQuote', '|',
        'undo', 'redo'
    ],
    shouldNotGroupWhenFull: true
}

Rich Text Editor

The nice Canadian

Remember Chris Hadfield? Of course, everyone has seen “Space Oddity” played and sung onboard the ISS. But have you seen the videos he recorded for schools? Short pieces on living in space, brushing your teeth in space, and sleeping in zero gravity? Kids love them. Teachers love them. Schools use them. This is a gift, a thank you gesture, a hand extended back. This humble man made his dream come true, he flew to the stars. But not even once did he forget the people that put him there – the engineers, designers, scientists. Those before him that went into space and those who gave their life to make this dream possible.

Now he helps bring up a new generation that will build better, safer, faster spaceships. That will once more reach the surface of the Moon, will leave the Earth orbit and fly to Mars, to Venus. Those are years to come and the goals will take a lot of patience. But what he does is gold. He is honest, humble, and true in what he did up there and the generation that came can see that, share in his activities and grab that passion.

# Listing available items

You can use the following snippet to retrieve all toolbar items available in your editor:

Array.from( editor.ui.componentFactory.names() );

# Adding a custom button

Refer to the Creating a simple plugin guide to learn how to build your own plugin, register its button and add it to the toolbar configuration.

The BlockToolbar feature provides an additional configurable toolbar on the left-hand side of the content area, useful when the main toolbar is not accessible (e.g. in certain balloon block editor scenarios).

Editor toolbar

# Basic toolbar configuration

# Demo

# Separating toolbar items

# Extended toolbar configuration format

The space race

The space race

# Multiline (wrapping) toolbar

# Automatic toolbar wrapping

The space stations

The space stations

# Explicit wrapping breakpoint

The nice Canadian

The nice Canadian

# Listing available items

# Adding a custom button

# Block toolbar