Create simple custom toolbar buttons

This page keeps the core pattern from the legacy example: define a button factory, register it in buttons, and reference it from toolbar.

HTML output

Ready.

Example configuration - Toolbar Buttons

function HelloButton(context) {
  const ui = context.ui;
  return ui.button({
    contents: '<span class="fw-semibold">Hello</span>',
    tooltip: 'Insert hello text',
    click() {
      context.invoke('editor.insertText', ' hello');
    },
  }).render();
}

summernote.create('#custom-toolbar-editor', {
  height: 220,
  toolbar: [
    ['custom', ['hello', 'badge']],
  ],
  buttons: {
    hello: HelloButton,
    badge: BadgeButton,
  },
});