配置
Quill 提供多种自定义方式以满足你的需求。本节致力于调整现有功能。有关添加新功能,请参阅 模块 部分;有关样式设置,请参阅 主题 部分。
¥Quill allows several ways to customize it to suit your needs. This section is dedicated to tweaking existing functionality. See the Modules section for adding new functionality and the Themes section for styling.
容器
¥Container
Quill 需要一个容器来放置编辑器。你可以传入 CSS 选择器或 DOM 对象。
¥Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.
const quill = new Quill('#editor'); // First matching element will be used
const container = document.getElementById('editor');const quill = new Quill(container);
如果容器不为空,Quill 将使用现有内容进行初始化。
¥If the container is not empty, Quill will initialize with the existing contents.
选项
¥Options
要配置 Quill,请传入一个选项对象:
¥To configure Quill, pass in an options object:
const options = { debug: 'info', modules: { toolbar: true, }, placeholder: 'Compose an epic...', theme: 'snow' }; const quill = new Quill('#editor', options);
以下键是可识别的:
¥The following keys are recognized:
bounds
默认值:document.body
¥Default: document.body
DOM 元素或 DOM 元素的 CSS 选择器,编辑器的 UI 元素(例如工具提示等)应限制在其中。目前,它只考虑左右边界。
¥DOM Element or a CSS selector for a DOM Element, within which the editor's ui elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.
debug
默认值:warn
¥Default: warn
debug 的快捷方式。注意:debug
是一个静态方法,会影响页面上其他 Quill 编辑器实例。默认情况下,仅启用警告和错误消息。
¥Shortcut for debug. Note debug
is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.
formats
默认值:null
¥Default: null
一个可识别且可存在于编辑器内容中的格式列表。
¥A list of formats that are recognized and can exist within the editor contents.
默认情况下,Quill 库中定义的所有格式均已允许。要将格式限制为较小的列表,请传入要支持的格式名称数组。
¥By default, all formats that are defined in the Quill library are allowed. To restrict formatting to a smaller list, pass in an array of the format names to support.
你可以使用 注册表项 创建全新的格式或更全面地自定义内容。指定 registry
选项将忽略此 formats
选项。
¥You can create brand new formats or more fully customize the content using Registries.
Specifying a registry
option will ignore this formats
option.
const Parchment = Quill.import('parchment'); const quill = new Quill('#editor', { formats: ['italic'], }); const Delta = Quill.import('delta'); quill.setContents( new Delta() .insert('Only ') .insert('italic', { italic: true }) .insert(' is allowed. ') .insert('Bold', { bold: true }) .insert(' is not.') );
placeholder
默认值:无
¥Default: None
当编辑器为空时显示的占位符文本。
¥Placeholder text to show when editor is empty.
const options = { placeholder: 'Hello, World!', theme: 'snow' }; const quill = new Quill('#editor', options);
readOnly
默认值:false
¥Default: false
是否将编辑器实例化为只读模式。
¥Whether to instantiate the editor to read-only mode.
const options = { readOnly: true, modules: { toolbar: null }, theme: 'snow' }; const quill = new Quill('#editor', options); const Delta = Quill.import('delta'); quill.setContents( new Delta() .insert('Hello, ') .insert('World', { bold: true }) .insert('\n') );
registry
默认值:null
¥Default: null
默认情况下,Quill 定义的所有格式都通过编辑器实例之间的共享注册表在编辑器内容中受支持。使用 formats
限制简单用例的格式,使用 registry
进行更深入的自定义。指定此 registry
选项将忽略 formatting
选项。了解更多关于 注册表项 的信息。
¥By default all formats defined by Quill are supported in the editor contents through a shared registry between editor instances. Use formats
to restrict formatting for simple use cases and registry
for greater customization. Specifying this registry
option will ignore the formatting
option. Learn more about Registries.
theme
要使用的主题名称。内置选项为 "bubble"
或 "snow"
。无效或假值将加载默认的最小主题。请注意,仍然需要手动添加主题的特定样式表。有关更多信息,请参阅 主题。
¥Name of theme to use. The builtin options are "bubble"
or "snow"
. An invalid or falsy value will load a default minimal theme. Note the theme's specific stylesheet still needs to be included manually. See Themes for more information.