初始化配置

通過配置option和元件來自定義編輯器

自定義工具欄，彈出框

summernote允許自定義工具欄`

$('#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']]
  ]
});

你也可以使用外掛中已經預先定義好的工具欄。
你可以使用popover.air項來自定義極簡模式的彈出框而不是工具欄。

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

同樣也可以配置其他彈出框的按鈕。

自定義placeholder

$('#summernote').summernote({
  placeholder: 'write here...'
});

自定義字型

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']
});

summernote在把配置項中的字型新增到字型下拉框之前會先進行字型檢測，因此當我們使用網路字型時會遇到問題。可以在fontNamesIgnoreCheck配置項中定義網路字型的列表來使編輯器忽略對網路字型的檢測。

Dialogs

對話方塊不止可以放置在編輯器內，也可以被置於body中。

$('#summernote').summernote({
  dialogsInBody: true
});

Dialogs預設是沒有淡入淡出效果的，可以使用dialogsFade配置

$('#summernote').summernote({
  dialogsFade: true  // Add fade effect on dialogs
});

禁止拖放

可以使用disableDragAndDrop禁止拖放

$('#summernote').summernote({
  disableDragAndDrop: true
});

禁止使用快捷鍵

$('#summernote').summernote({
  shortcuts: false
});