Hi,
Smart.Editor lets you add custom toolbar items by defining toolbarItems entries as objects with a template (string or function). Your template can create and mount any Smart UI component (including dropdowns) inside the toolbar.
htmlelements.com
1) Add a custom dropdown to the main toolbar
<smart-editor id="editor"></smart-editor>
const editor = document.getElementById('editor');
editor.toolbarItems = [
'bold', 'italic', 'underline', '|',
{
name: 'mySnippetsDropdown',
width: 180,
template: (element, item) => {
// Create once, reuse (prevents duplicates on rerender)
if (!element.customElement) {
const ddl = document.createElement('smart-drop-down-list');
ddl.placeholder = 'Insert…';
ddl.selectionMode = 'one';
ddl.dataSource = [
{ label: 'Signature', value: 'Best regards,<br>Boyko' },
{ label: 'Meeting notes header', value: '<h3>Meeting Notes</h3><hr>' },
{ label: 'Callout', value: '<div class="callout">Tip: …</div>' }
];
ddl.addEventListener('change', (e) => {
const selected = e.detail?.value;
if (!selected) return;
// Insert at caret (pick the API you use in your app)
// Common patterns: editor.insertHTML(...), editor.value += ..., or execCommand.
if (typeof editor.insertHTML === 'function') {
editor.insertHTML(selected);
} else {
// Fallback if you manage the content yourself:
editor.value = (editor.value || '') + selected;
}
// Reset selection (optional)
ddl.selectedIndexes = [];
});
element.customElement = ddl;
}
if (!element.contains(element.customElement)) {
element.appendChild(element.customElement);
}
}
},
'|', 'undo', 'redo'
];
Hope this helps.
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/
.
