|
|
@@ -3,14 +3,14 @@ title: Block toolbar
|
|
|
category: features
|
|
|
---
|
|
|
|
|
|
-The {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar} plugin provides an additional [configurable](#configuration) toolbar on the left-hand side of the content area (the gutter). The toolbar is represented by a button with a pilcrow, or a paragraph mark, ¶. It is positioned next to the block element that the selection is anchored to (e.g. a paragraph), following the caret as the user edits the content and navigates the document.
|
|
|
+The {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar} plugin provides an additional [configurable](#configuration) toolbar on the left-hand side of the content area (the gutter). The toolbar is represented by a button with a pilcrow (or a paragraph mark — ¶). It is positioned next to the block element that the selection is anchored to (e.g. a paragraph), following the caret as the user edits the content and navigates the document.
|
|
|
|
|
|
-The block toolbar comes in handy when the main editor toolbar cannot be accessed. It complements the {@link builds/guides/overview#balloon-editor Balloon editor} when it falls short, e.g. when some content must be inserted (e.g. an image) but the selection is collapsed, leaving the user unable to access the toolbar.
|
|
|
+The block toolbar comes in handy when the main editor toolbar cannot be accessed. It complements the {@link builds/guides/overview#balloon-editor Balloon editor} when it falls short, for example when some content must be inserted (like an image) but the selection is collapsed, leaving the user unable to access the toolbar.
|
|
|
|
|
|
## Example
|
|
|
|
|
|
<info-box hint>
|
|
|
- Move the caret around to see the block toolbar button following the selection. Click the button (¶) to use the toolbar, e.g. create a header or insert an image.
|
|
|
+ Move the caret around the content with the balloon editor below to see the block toolbar button following the selection. Click the button (¶) to use the toolbar, for example to create a header or insert an image.
|
|
|
</info-box>
|
|
|
|
|
|
{@snippet features/blocktoolbar}
|
|
|
@@ -20,7 +20,7 @@ The block toolbar comes in handy when the main editor toolbar cannot be accessed
|
|
|
The content of the toolbar can be defined using the {@link module:core/editor/editorconfig~EditorConfig#blockToolbar} configuration. See the [installation instructions](#installation) to learn more.
|
|
|
|
|
|
<info-box hint>
|
|
|
- Because the toolbar is always connected to the block of content, it works best with the features that modify entire blocks (e.g. create {@link features/headings headers}) or insert objects (e.g. {@link features/image images} or {@link features/table tables}) rather than inline styles (e.g. {@link features/basic-styles bold or italic}).
|
|
|
+ Because the toolbar is always connected to the block of content, it works best with the features that modify entire blocks (e.g. create {@link features/headings headings}) or insert objects (e.g. {@link features/image images} or {@link features/table tables}) rather than inline styles (e.g. {@link features/basic-styles bold or italic}).
|
|
|
</info-box>
|
|
|
|
|
|
To adjust the position of the block toolbar button to match the styles of your website, use the CSS `transform` property:
|
|
|
@@ -34,7 +34,7 @@ To adjust the position of the block toolbar button to match the styles of your w
|
|
|
## Installation
|
|
|
|
|
|
<info-box hint>
|
|
|
- Remember to add relevant features to the editor configuration first. The block toolbar provides a space for the buttons, it does not bring the actual features. For example, the `heading1` button will not work if there is no {@link features/headings Headings} feature in the editor.
|
|
|
+ Remember to add relevant features to the editor configuration first. The block toolbar provides a space for the buttons, but it does not bring the actual features. For example, the `heading1` button will not work if there is no {@link features/headings Headings} feature in the editor.
|
|
|
</info-box>
|
|
|
|
|
|
To add this feature to your editor install the [`@ckeditor/ckeditor5-ui`](https://www.npmjs.com/package/@ckeditor/ckeditor5-ui) package:
|