关于富文本编辑器summernote的基本使用（二）

关于富文本编辑器summernote的基本使用（二）

初始化配置

通过配置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
});