Curated style tags

styleTags still works well in the Bootstrap 5 build and is one of the easiest ways to expose only the block styles your project actually wants editors to use.

Highlight a paragraph and open the Style dropdown to switch between the custom entries.

This example keeps normal paragraphs, headings, code blocks, and a Bootstrap-style blockquote.

Example configuration - Style Tags

summernote.create('#style-tags-editor', {
  height: 260,
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline']],
    ['para', ['ul', 'ol', 'paragraph']],
  ],
  styleTags: [
    'p',
    { title: 'Lead paragraph', tag: 'p', className: 'lead', value: 'p' },
    { title: 'Bootstrap blockquote', tag: 'blockquote', className: 'blockquote', value: 'blockquote' },
    'pre',
    'h2',
    'h3',
  ],
});