Curated style tags

styleTags still works well in the theme 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 theme-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: 'theme blockquote', tag: 'blockquote', className: 'blockquote', value: 'blockquote' },
    'pre',
    'h2',
    'h3',
  ],
});