Reply To: Can someone clarify how to configure: Editor?

[Markov]

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/