Custom Toolbar
Customize the toolbar appearance and functionality to match your needs.
FontAwesome Icons
Interactive Demo
FontAwesome icons toolbar - Select text to see professional icons:
🔄 Loading interactive demo...
This editor uses FontAwesome icons for a professional look.
Try selecting this text to see the beautiful icons in action!
Use professional icons for all toolbar buttons:
typescript
const editor = new MediumEditor('.editable', {
toolbar: {
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
},
buttonLabels: 'fontawesome'
})1
2
3
4
5
6
2
3
4
5
6
Custom Button Labels
Define custom button content using text, HTML, or emojis:
typescript
const editor = new MediumEditor('.editable', {
toolbar: {
buttons: [
{
name: 'bold',
contentDefault: '<strong>Bold</strong>'
},
{
name: 'italic',
contentDefault: '<em>Italic</em>'
},
{
name: 'anchor',
contentDefault: '🔗 Link'
},
{
name: 'quote',
contentDefault: '💬 Quote'
},
{
name: 'h2',
contentDefault: 'H2'
}
]
}
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Static Toolbar
Interactive Demo
Static toolbar - Always visible, no need to select text:
🔄 Loading interactive demo...
The toolbar above is always visible, making it easy to access formatting options.
You can start typing or click anywhere to begin editing!
Make the toolbar always visible instead of appearing on text selection:
HTML
html
<div class="toolbar-container">
<div class="static-editor" data-placeholder="Toolbar is always visible...">
<p>The toolbar above is always visible, making it easy to access formatting options.</p>
</div>
</div>1
2
3
4
5
2
3
4
5
TypeScript
typescript
const editor = new MediumEditor('.static-editor', {
toolbar: {
static: true,
sticky: true,
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3']
}
})1
2
3
4
5
6
7
2
3
4
5
6
7
CSS
css
.toolbar-container {
max-width: 600px;
margin: 0 auto;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
}
.static-editor {
min-height: 200px;
padding: 1rem;
border: none;
outline: none;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Minimal Toolbar
Interactive Demo
Minimal toolbar with only Bold and Italic:
🔄 Loading interactive demo...
This editor has a minimal toolbar with only essential buttons.
Perfect for simple formatting needs without clutter.
Create a simple toolbar with only essential buttons:
typescript
const minimalEditor = new MediumEditor('.minimal-toolbar', {
toolbar: {
buttons: ['bold', 'italic']
},
buttonLabels: false // Use default labels
})1
2
3
4
5
6
2
3
4
5
6
Custom Button Styling
Style toolbar buttons with custom CSS:
TypeScript
typescript
const styledEditor = new MediumEditor('.styled-toolbar', {
toolbar: {
buttons: [
{
name: 'bold',
contentDefault: '<b>B</b>',
classList: ['custom-bold-btn']
},
{
name: 'italic',
contentDefault: '<i>I</i>',
classList: ['custom-italic-btn']
},
{
name: 'anchor',
contentDefault: '🔗',
classList: ['custom-link-btn']
}
]
}
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CSS
css
.custom-bold-btn {
background: #dc3545 !important;
color: white !important;
font-weight: bold;
border-radius: 4px;
}
.custom-italic-btn {
background: #28a745 !important;
color: white !important;
font-style: italic;
border-radius: 4px;
}
.custom-link-btn {
background: #007bff !important;
color: white !important;
border-radius: 4px;
}
.custom-bold-btn:hover,
.custom-italic-btn:hover,
.custom-link-btn:hover {
opacity: 0.8;
transform: scale(1.05);
transition: all 0.2s ease;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Toolbar Positioning
Control where the toolbar appears:
Relative Container
typescript
const editor = new MediumEditor('.editable', {
toolbar: {
buttons: ['bold', 'italic', 'anchor'],
relativeContainer: document.querySelector('.editor-wrapper')
}
})1
2
3
4
5
6
2
3
4
5
6
Disable Toolbar for Specific Elements
html
<div class="editable">This element has a toolbar</div>
<div class="editable" data-disable-toolbar="true">
This element has no toolbar
</div>1
2
3
4
2
3
4
Advanced Toolbar Configuration
Complete toolbar customization example:
typescript
const advancedEditor = new MediumEditor('.advanced-toolbar', {
toolbar: {
// Button configuration
buttons: [
'bold',
'italic',
'underline',
{
name: 'anchor',
contentDefault: '🔗 Link',
classList: ['custom-link-button']
},
'h2',
'h3',
{
name: 'quote',
contentDefault: '❝ Quote',
classList: ['custom-quote-button']
}
],
// Toolbar behavior
static: false,
sticky: false,
updateOnEmptySelection: false,
// Positioning
relativeContainer: null,
standardizeSelectionStart: false,
// Appearance
allowMultiParagraphSelection: true
},
// Button labels
buttonLabels: false,
// Disable return key in specific scenarios
disableReturn: false,
disableDoubleReturn: false
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Theme Integration
Combine toolbar customization with themes:
typescript
// Import a theme
import 'ts-medium-editor/css/themes/flat.css'
const themedEditor = new MediumEditor('.themed-editor', {
toolbar: {
buttons: ['bold', 'italic', 'underline', 'anchor', 'quote']
},
buttonLabels: 'fontawesome'
})1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Responsive Toolbar
Create a toolbar that adapts to screen size:
CSS
css
@media (max-width: 768px) {
.medium-editor-toolbar {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
top: auto !important;
border-radius: 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.medium-editor-toolbar-actions {
display: flex;
justify-content: space-around;
padding: 10px;
}
.medium-editor-button {
flex: 1;
margin: 0 2px;
padding: 12px 8px;
font-size: 16px;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
TypeScript
typescript
const responsiveEditor = new MediumEditor('.responsive-editor', {
toolbar: {
buttons: ['bold', 'italic', 'anchor'],
static: window.innerWidth <= 768, // Static on mobile
sticky: true
}
})
// Update toolbar on resize
window.addEventListener('resize', () => {
if (window.innerWidth <= 768) {
// Mobile: make toolbar static
responsiveEditor.options.toolbar.static = true
} else {
// Desktop: make toolbar dynamic
responsiveEditor.options.toolbar.static = false
}
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Toolbar Events
Listen to toolbar-specific events:
typescript
const editor = new MediumEditor('.editable')
// Toolbar shown
editor.subscribe('showToolbar', (event, editable) => {
console.log('Toolbar shown for:', editable)
})
// Toolbar hidden
editor.subscribe('hideToolbar', (event, editable) => {
console.log('Toolbar hidden for:', editable)
})
// Button clicked
editor.subscribe('editableClick', (event, editable) => {
console.log('Editor clicked, toolbar may appear')
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Next Steps
- Learn about Multiple Editors with different toolbars
- Explore Event Handling for toolbar interactions
- Check out Extensions for custom toolbar buttons