Reuse a custom button inside a popover

Custom buttons can also be referenced from popover configuration. This page adds a custom link-popover button that marks the demo link with rel="nofollow noopener".

HTML output

Ready.

Example configuration - Popover Buttons

function NofollowButton(context) {
  const ui = context.ui;
  return ui.button({
    contents: 'Nofollow',
    tooltip: 'Mark the current link as nofollow',
    click() {
      const anchor = context.layoutInfo.editable[0].querySelector('a');
      anchor.setAttribute('rel', 'nofollow noopener');
    },
  }).render();
}

summernote.create('#custom-popover-editor', {
  height: 220,
  popover: {
    link: [
      ['custom', ['nofollow']],
      ['link', ['linkDialogShow', 'unlink']],
    ],
  },
  buttons: {
    nofollow: NofollowButton,
  },
});