Docs › Writing helpers
Bubble toolbar
A small format bar that appears above selected text.
Select text with the mouse and a few common buttons (bold, color, link …) appear right above it. Useful with a hidden or short toolbar.
Try it
Drag over any word in this sentence. Even with no toolbar, format buttons appear above it.
Selected text can get bold, a color or a link.
Code for this demo
createEditor('#editor', {
toolbar: false,
bubbleToolbar: true,
});Buttons
Bold, italic, underline, strikethrough, inline code | text color, highlight, link, clear formatting. Formats already on the selection show as pressed. Keyboard shortcuts (Ctrl+B, Ctrl+K …) work as usual.
When it does not show
- Touch screens (phones, tablets), so it does not fight the browser selection menu
- Inside a code block, with an image selected, or with several table cells selected
- Read-only mode and the HTML source view
- When only spaces are selected
Options
| Name | Type | Default | Description |
|---|---|---|---|
bubbleToolbar | boolean | true | false turns the bubble off. |
colors | string[] | built-in palette | Text color palette. When set, the bubble highlight button uses this list too. |