Summernote with the full public Bootstrap 5 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 Bootstrap 5 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']],
  ],
});