Summernote个性化定制使用帮助(一)

Deep dive

Initialization options

Customize by Initializing various options and modules.

Custom toolbar, popover

Summernote allows you to customise the toolbar.

$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

This is a toolbar with font style only.

Toolbar for font style...

You can compose a toolbar with pre-shipped buttons.

• Insert
  • picture: open image dialog
  • link: open link dialog
  • video: open video dialog
  • table: insert a table
  • hr: insert a horizontal rule
• Font Style
  • fontname: set font family
  • fontsize: set font size
  • color: set foreground and background color
  • forecolor: set foreground color
  • backcolor: set background color
  • bold: toggle font weight
  • italic: toggle italic
  • underline: toggle underline
  • strikethrough: toggle strikethrough
  • superscript: toggle superscript
  • subscript: toggle subscript
  • clear: clear font style
• Paragraph style
  • style: format selected block
  • ol: toggle ordered list
  • ul: toggle unordered list
  • paragraph: dropdown for paragraph align
  • height: set line height
• Misc
  • fullscreen: toggle fullscreen editing mode
  • codeview: toggle wysiwyg and html editing mode
  • undo: undo
  • redo: redo
  • help: open help dialog

The following settings are default options for toolbar buttons.

toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['fontname', ['fontname']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['table', ['table']],
  ['insert', ['link', 'picture', 'video']],
  ['view', ['fullscreen', 'codeview', 'help']],
],

Air-mode has its own popover, not toolbar. You can customize it with popover.air option.

$('#summernote').summernote({
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']]
    ]
  }
});

You can also setup buttons of the other popovers in the same way. The below s