Configuration
Quill
允许通过多种方式对其进行自定义以满足您的需求。 本节致力于调整现有功能。 有关添加新功能的信息,请参见模块部分;有关样式的信息,请参见主题部分。
Container
Quill
需要一个容器,其中将附加编辑器。 您可以传入CSS选择器或DOM对象。
var editor = new Quill('.editor'); // First matching element will be used
var container = document.getElementById('editor');
var editor = new Quill(container);
var container = $('.editor').get(0);
var editor = new Quill(container);
Options
要配置Quill
,请传递一个options
对象:
var options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill('#editor', options);
可设置的选项值:
bounds
Default: document.body
DOM元素或DOM元素的CSS选择器,应将编辑器的ui元素(即工具提示等)限制在其中。 当前,它仅考虑左右边界。
debug
Default: warn
调试的快捷方式。 注意debug
是一个静态方法,它将影响页面上其他Quill
编辑器实例。 默认情况下仅启用警告和错误消息。
formats
Default: All formats
允许在编辑器中使用的格式白名单。 有关完整列表,请参见格式。
modules
要包括的模块和相应选项的集合。 有关更多信息,请参见模块。
placeholder
Default: None
当编辑器为空时显示的占位符文本
readOnly
Default: false
是否将编辑器实例化为只读模式
scrollingContainer
Default: null
DOM元素或DOM元素的CSS选择器,用于指定具有滚动条的容器(即overflow-y:auto
)(如果已将其从默认ql-editor
更改为带有自定义CSS的容器)。当Quill
设置为auto grow
其高度,并且滚动由另一个祖先容器负责时,有必要修复滚动跳跃错误。
theme
要使用的主题名称。 内置选项是"bubble
" 或 “snow
”。无效或虚假的值将加载默认的最小主题。 请注意,主题的特定样式表仍需要手动添加。 有关更多信息,请参见Themes
。
Formats
Quill支持UI控件和API调用中的多种格式。
默认情况下,所有格式都被启用并允许存在于Quill
编辑器中,并且可以使用formats
选项进行配置。 这与在工具栏中添加控件是分开的。 例如,您可以配置Quill
,以允许将加粗的内容粘贴到工具栏中没有加粗按钮的编辑器中。
Inline
- Background Color -
background
- Bold -
bold
- Color -
color
- Font -
font
- Inline Code -
code
- 斜体 -
italic
- Link -
link
- Size -
size
- 删除线 -
strike
- 上标/下标 -
script
- 下划线 -
underline
Block
- 引用 -
blockquote
- Header -
header
- 缩进 -
indent
- List -
list
- 文本对齐方式 -
align
- Text Direction -
direction
- Code Block -
code-block
Embeds
- 公式 -
formula
(requires KaTex) - Image -
image
- Video -
video