Custom toolbar and air-mode popover

The legacy initialization options still map cleanly to the Bootstrap 5 build: standard editors use toolbar, while air mode keeps its own popover.air definition.

Custom toolbar

This keeps the frame editor, but trims the toolbar to a more focused writing setup.

Focused writing toolbar

Use the toolbar to style text, change font size, add color, align paragraphs, and adjust line height.

Air-mode popover

Select text in the inline editor to open the floating air popover.

Select any sentence in this paragraph to open the contextual toolbar.

Add a link, create a list, or switch to code view without showing a fixed toolbar.

Example configuration - Toolbar and Popover
summernote.create('#toolbar-editor', {
  height: 260,
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
  ],
});
summernote.create('#air-popover-editor', {
  airMode: true,
  airModeFullscreen: true,
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']],
      ['para', ['ul', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture']],
      ['view', ['fullscreen', 'codeview']],
    ],
  },
});