quill.js官方文档(一)【Configuration,Formats】

谁借莪１个温暖的怀抱￠ 2021-07-04 16:17 1367阅读 1赞

## `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`