多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
初始化配置 通过配置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']] ] } }); ~~~ **自定义工具栏上的预设参数** ![](https://box.kancloud.cn/70f9a2b26667d7d958d9cec66a454175_923x880.jpg) 同样也可以配置其他弹出框的按钮。 自定义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 }); ~~~