Summernote Air Mode with the full public theme toolbar

This page keeps the vanilla summernote.create() startup, but exposes the broader Summernote surface in air mode: formatting, font family and size, colors, line height, tables, media dialogs, history controls, fullscreen, code view, and help. Select text inside the editor to open the floating inline toolbar. Switching to fullscreen temporarily uses the regular toolbar and restores air mode when you leave fullscreen.

How it works

This example uses summernote.create() with a comprehensive configuration object to enable all available air popover options. The floating popover and the temporary fullscreen toolbar expose the same feature set as the regular toolbar.

Try these

Select text to open the air popover, then exercise the color, paragraph, font, size, table, and insert dropdowns. The undo/redo and code view toggles are also reachable from the popover. Fullscreen promotes the popover to the regular toolbar.

Air Mode all features demo

Highlight any text below to open the floating inline toolbar. Switch to fullscreen from the popover to compare the regular toolbar.

In computer science, functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids state and mutable data.

Functional programming emphasizes functions that produce results that depend only on their inputs and not on the program state—i.e. pure mathematical functions. It is a declarative programming paradigm, which means programming is done with expressions.

Example configuration - Air Mode All Features
summernote.create('#airmode-all-editor', {
  airMode: true,
  airModeFullscreen: true,
  dialogsInBody: true,
  focus: true,
  fontNames: ['system-ui', 'Arial', 'Courier New', 'Helvetica'],
  fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
  lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.8', '2.0', '3.0'],
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph', 'height']],
    ['table', ['table']],
    ['insert', ['link', 'picture', 'video', 'hr']],
    ['history', ['undo', 'redo']],
    ['view', ['fullscreen', 'codeview', 'help']],
  ],
  popover: {
    air: [
      ['style', ['style']],
      ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
      ['fontname', ['fontname']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph', 'height']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video', 'hr']],
      ['history', ['undo', 'redo']],
      ['view', ['fullscreen', 'codeview', 'help']],
    ],
  },
});