关于富文本编辑器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配置
禁止拖放
可以使用disableDragAndDrop禁止拖放
$('#summernote').summernote({
disableDragAndDrop: true
});
禁止使用快捷键
$('#summernote').summernote({
shortcuts: false
});
评论列表