Summernote with the full public theme toolbar

This page keeps the vanilla summernote.create() startup, but exposes the broader Summernote surface: formatting, font family and size, colors, line height, tables, media dialogs, history controls, fullscreen, code view, and help.

How it works

This example uses summernote.create() with a comprehensive configuration object to enable all available toolbar options and features. It demonstrates direct integration with theme and the vanilla JS API.

Try these

Try inserting tables, uploading images, embedding videos, and using fullscreen mode. Utilize the history (undo/redo) and the code view.

All features demo

Select text, apply formatting, try tables, links, media, history, fullscreen, and resize from the status bar below.

Bold, italic, underline, strike, super/subscript
Font family, size, color, line height
Lists, paragraph alignment, tables, links, image upload, video embed

Example configuration - All Features

summernote.create('#all-features-editor', {
  height: 420,
  minHeight: 260,
  maxHeight: 800,
  tabsize: 2,
  placeholder: 'Try the full Summernote feature set here...',
  focus: true,
  dialogsInBody: 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']],
  ],
});