初始化配置
通过配置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
});
~~~
- 空白目录
- summernote富文本编辑器
- 基本使用(一)
- 基本使用(二)
- 基本使用(三)
- 基本使用(四)
- 修改Summernote文本编辑器支持上传图片到服务器
- 修改图片上传后的样式
- Composer的一些基本用法
- 使用中国镜像快速安装
- 自己项目中常用到的一些Composer
- TP5的一些常见功能实现
- 通过phpmailer实现邮件的发送
- 使用PhantomJS将网页生成图片
- TP5在Linux服务器中LNMP环境下的配置
- 利用JWT做token开发
- 小程序开发备忘录
- 小程序生成自定义二维码
- Bootstrap使用心得
- 异步加载数据,更新select方法
- Html5实现图片上传前裁剪
- mysql一些小技巧
- php移动mysql字段的位置
- 服务器相关知识
- 阿里云专属网络外网访问的设置
- Linux定时执行任务