API

内容

¥Content

deleteText

从编辑器中删除文本，返回表示更改的 增量 对象。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Deletes text from the editor, returning a Delta representing the change. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

deleteText(index: number, length: number, source: string = 'api'): Delta

示例 1

¥Example 1

quill.deleteText(6, 4);

示例 2

¥Example 2

const quill = new Quill('#editor', { theme: 'snow' });

document.querySelector('#deleteButton').addEventListener('click', () => {
  quill.deleteText(5, 7);
});

getContents

检索编辑器的内容以及格式数据，由 增量 对象表示。

¥Retrieves contents of the editor, with formatting data, represented by a Delta object.

方法

¥Methods

getContents(index: number = 0, length: number = remaining): Delta

示例

¥Examples

const delta = quill.getContents();

getLength

检索编辑器内容的长度。注意：即使 Quill 为空，'\n' 仍然会代表一个空行，因此 getLength 将返回 1。

¥Retrieves the length of the editor contents. Note even when Quill is empty, there is still a blank line represented by '\n', so getLength will return 1.

方法

¥Methods

getLength(): number

示例

¥Examples

const length = quill.getLength();

getText

检索编辑器的字符串内容。非字符串内容会被忽略，因此返回的字符串长度可能比 getLength 返回的编辑器字符串长度短。注意：即使 Quill 为空，编辑器中仍然会有一个空行，因此在这些情况下，getText 将返回 '\n'。

¥Retrieves the string contents of the editor. Non-string content are omitted, so the returned string's length may be shorter than the editor's as returned by getLength. Note even when Quill is empty, there is still a blank line in the editor, so in these cases getText will return '\n'.

length 参数默认为文档剩余的长度。

¥The length parameter defaults to the length of the remaining document.

方法

¥Methods

getText(index: number = 0, length: number = remaining): string

示例

¥Examples

const text = quill.getText(0, 10);

getSemanticHTML

获取编辑器内容的 HTML 表示。此方法可用于将编辑器内容导出为可用于其他应用的格式。

¥Get the HTML representation of the editor contents. This method is useful for exporting the contents of the editor in a format that can be used in other applications.

length 参数默认为文档剩余的长度。

¥The length parameter defaults to the length of the remaining document.

方法

¥Methods

getSemanticHTML(index: number = 0, length: number = remaining): string

示例

¥Examples

const html = quill.getSemanticHTML(0, 10);

insertEmbed

将嵌入内容插入编辑器，并返回表示更改的 增量。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Insert embedded content into the editor, returning a Delta representing the change. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

insertEmbed(index: number, type: string, value: any, source: string = 'api'): Delta

示例

¥Examples

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');

insertText

将文本插入编辑器，可以选择使用指定的格式或多个 formats。返回表示更改的 增量。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Inserts text into the editor, optionally with a specified format or multiple formats. Returns a Delta representing the change. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

insertText(index: number, text: string, source: string = 'api'): Delta
insertText(index: number, text: string, format: string, value: any,
           source: string = 'api'): Delta
insertText(index: number, text: string, formats: { [name: string]: any },
           source: string = 'api'): Delta

示例

¥Examples

quill.insertText(0, 'Hello', 'bold', true);

quill.insertText(5, 'Quill', {
  color: '#ffff00',
  italic: true,
});

setContents

用给定的内容覆盖编辑器。内容应以 newline 结尾。返回表示更改的 Delta。如果给定的 Delta 没有无效操作，它将与传入的 Delta 相同。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Overwrites editor with given contents. Contents should end with a newline. Returns a Delta representing the change. This will be the same as the Delta passed in, if given Delta had no invalid operations. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

setContents(delta: Delta, source: string = 'api'): Delta

示例

¥Examples

quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' },
]);

setText

使用给定文本设置编辑器的内容，并返回表示更改的 增量。注意：Quill 文档必须以换行符结尾，如果省略，系统会为你添加一个换行符。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Sets contents of editor with given text, returning a Delta representing the change. Note Quill documents must end with a newline so one will be added for you if omitted. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

setText(text: string, source: string = 'api'): Delta

示例

¥Examples

quill.setText('Hello\n');

updateContents

将 Delta 应用于编辑器内容，返回表示更改的 增量。如果传入的 Delta 没有无效操作，则这些 Delta 将是相同的。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Applies Delta to editor contents, returning a Delta representing the change. These Deltas will be the same if the Delta passed in had no invalid operations. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

updateContents(delta: Delta, source: string = 'api'): Delta

示例

¥Examples

// Assuming editor currently contains [{ insert: 'Hello World!' }]
quill.updateContents(new Delta()
  .retain(6)                  // Keep 'Hello '
  .delete(5)                  // 'World' is deleted
  .insert('Quill')
  .retain(1, { bold: true })  // Apply bold to exclamation mark
);
// Editor should now be [
//  { insert: 'Hello Quill' },
//  { insert: '!', attributes: { bold: true} }
// ]

格式化

¥Formatting

format

根据用户当前的选择格式化文本，返回表示更改的 增量。如果用户的选择长度为 0，即它是一个光标，则格式将被设置为活动状态，因此用户输入的下一个字符将具有该格式。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Format text at user's current selection, returning a Delta representing the change. If the user's selection length is 0, i.e. it is a cursor, the format will be set active, so the next character the user types will have that formatting. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

format(name: string, value: any, source: string = 'api'): Delta

示例

¥Examples

quill.format('color', 'red');
quill.format('align', 'right');

formatLine

格式化指定范围内的所有行，返回表示更改的 增量 对象。有关可用格式列表，请参阅 formats。使用内联格式调用时无效。要删除格式，请将 false 传递给值参数。用户的选择可能不会被保留。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Formats all lines in given range, returning a Delta representing the change. See formats for a list of available formats. Has no effect when called with inline formats. To remove formatting, pass false for the value argument. The user's selection may not be preserved. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

formatLine(index: number, length: number, source: string = 'api'): Delta
formatLine(index: number, length: number, format: string, value: any,
           source: string = 'api'): Delta
formatLine(index: number, length: number, formats: { [name: string]: any },
           source: string = 'api'): Delta

示例

¥Examples

quill.setText('Hello\nWorld!\n');

quill.formatLine(1, 2, 'align', 'right');   // right aligns the first line
quill.formatLine(4, 4, 'align', 'center');  // center aligns both lines

formatText

格式化编辑器中的文本，返回表示更改的 增量 对象。对于行级格式，例如文本对齐，请定位换行符或使用 formatLine 助手。有关可用格式列表，请参阅 formats。要删除格式，请将 false 传递给值参数。用户的选择可能不会被保留。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Formats text in the editor, returning a Delta representing the change. For line level formats, such as text alignment, target the newline character or use the formatLine helper. See formats for a list of available formats. To remove formatting, pass false for the value argument. The user's selection may not be preserved. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

formatText(index: number, length: number, source: string = 'api'): Delta
formatText(index: number, length: number, format: string, value: any,
           source: string = 'api'): Delta
formatText(index: number, length: number, formats: { [name: string]: any },
           source: string = 'api'): Delta

示例

¥Examples

quill.setText('Hello\nWorld!\n');

quill.formatText(0, 5, 'bold', true);      // bolds 'hello'

quill.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue
  'bold': false,
  'color': 'rgb(0, 0, 255)'
});

quill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line

getFormat

检索指定范围内文本的通用格式。对于要报告的格式，范围内的所有文本都必须具有真值。如果存在不同的真值，则将报告一个包含所有真值的数组。如果未提供范围，则使用用户当前的选择范围。可用于显示已在光标上设置的格式。如果调用时不带参数，则将使用用户当前的选择范围。

¥Retrieves common formatting of the text in the given range. For a format to be reported, all text within the range must have a truthy value. If there are different truthy values, an array with all truthy values will be reported. If no range is supplied, the user's current selection range is used. May be used to show which formats have been set on the cursor. If called with no arguments, the user's current selection range will be used.

方法

¥Methods

getFormat(range: Range = current): Record<string, unknown>
getFormat(index: number, length: number = 0): Record<string, unknown>

示例

¥Examples

quill.setText('Hello World!');
quill.formatText(0, 2, 'bold', true);
quill.formatText(1, 2, 'italic', true);
quill.getFormat(0, 2);   // { bold: true }
quill.getFormat(1, 1);   // { bold: true, italic: true }

quill.formatText(0, 2, 'color', 'red');
quill.formatText(2, 1, 'color', 'blue');
quill.getFormat(0, 3);   // { color: ['red', 'blue'] }

quill.setSelection(3);
quill.getFormat();       // { italic: true, color: 'blue' }

quill.format('strike', true);
quill.getFormat();       // { italic: true, color: 'blue', strike: true }

quill.formatLine(0, 1, 'align', 'right');
quill.getFormat();       // { italic: true, color: 'blue', strike: true,
                         //   align: 'right' }

removeFormat

删除指定范围内的所有格式和嵌入，并返回表示更改的 增量 对象。如果行的任何部分包含在范围内，行格式将被删除。用户的选择可能不会被保留。来源 可能是 "user"、"api" 或 "silent"。当编辑器为 disabled 时，如果 source 为 "user"，则调用将被忽略。

¥Removes all formatting and embeds within given range, returning a Delta representing the change. Line formatting will be removed if any part of the line is included in the range. The user's selection may not be preserved. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.

方法

¥Methods

removeFormat(index: number, length: number, source: string = 'api'): Delta

示例

¥Examples

quill.setContents([
  { insert: 'Hello', { bold: true } },
  { insert: '\n', { align: 'center' } },
  { insert: { formula: 'x^2' } },
  { insert: '\n', { align: 'center' } },
  { insert: 'World', { italic: true }},
  { insert: '\n', { align: 'center' } }
]);

quill.removeFormat(3, 7);
// Editor contents are now
// [
//   { insert: 'Hel', { bold: true } },
//   { insert: 'lo\n\nWo' },
//   { insert: 'rld', { italic: true }},
//   { insert: '\n', { align: 'center' } }
// ]

选择

¥Selection

getBounds

检索指定位置处所选内容的像素位置（相对于编辑器容器）和尺寸。用户当前的选择不必位于该索引处。用于计算工具提示的放置位置。

¥Retrieves the pixel position (relative to the editor container) and dimensions of a selection at a given location. The user's current selection need not be at that index. Useful for calculating where to place tooltips.

方法

¥Methods

getBounds(index: number, length: number = 0):
  { left: number, top: number, height: number, width: number }

示例

¥Examples

quill.setText('Hello\nWorld\n');
quill.getBounds(7); // Returns { height: 15, width: 0, left: 27, top: 31 }

getSelection

检索用户的选择范围，可选择先聚焦编辑器。否则，如果编辑器没有焦点，可能会返回 null。

¥Retrieves the user's selection range, optionally to focus the editor first. Otherwise null may be returned if editor does not have focus.

方法

¥Methods

getSelection(focus = false): { index: number, length: number }

示例

¥Examples

const range = quill.getSelection();
if (range) {
  if (range.length == 0) {
    console.log('User cursor is at index', range.index);
  } else {
    const text = quill.getText(range.index, range.length);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}

setSelection

将用户选择设置为给定范围，这也会将编辑器聚焦。提供 null 作为选择范围会使编辑器变得模糊。来源 可能是 "user"、"api" 或 "silent"。

¥Sets user selection to given range, which will also focus the editor. Providing null as the selection range will blur the editor. Source may be "user", "api", or "silent".

方法

¥Methods

setSelection(index: number, length: number = 0, source: string = 'api')
setSelection(range: { index: number, length: number },
             source: string = 'api')

示例

¥Examples

quill.setSelection(0, 5);

scrollSelectionIntoView

将当前选择内容滚动到可见区域。如果选择内容已经可见，则不会发生滚动。

¥Scroll the current selection into the visible area. If the selection is already visible, no scrolling will occur.

方法

¥Methods

scrollSelectionIntoView();

示例

¥Examples

quill.scrollSelectionIntoView();

编辑器

¥Editor

blur

从编辑器中移除焦点。

¥Removes focus from the editor.

方法

¥Methods

blur();

示例

¥Examples

quill.blur();

disable

enable(false) 的简写。

¥Shorthand for enable(false).

enable

设置用户通过鼠标或键盘等输入设备进行编辑的能力。当 source 为 "api" 或 "silent" 时，不影响 API 调用的功能。

¥Set ability for user to edit, via input devices like the mouse or keyboard. Does not affect capabilities of API calls, when the source is "api" or "silent".

方法

¥Methods

enable(enabled: boolean = true);

示例

¥Examples

quill.enable();
quill.enable(false);   // Disables user input

focus

聚焦编辑器并恢复其最后的范围。

¥Focuses the editor and restores its last range.

方法

¥Methods

focus(options: { preventScroll?: boolean } = {});

示例

¥Examples

// Focus the editor, and scroll the selection into view
quill.focus();

// Focus the editor, but don't scroll
quill.focus({ preventScroll: true });

hasFocus

检查编辑器是否获得焦点。注意：工具栏和工具提示上的焦点不计入编辑器。

¥Checks if editor has focus. Note focus on toolbar, tooltips, does not count as the editor.

方法

¥Methods

hasFocus(): boolean

示例

¥Examples

quill.hasFocus();

update

同步检查编辑器是否有用户更新，并在发生更改时触发事件。用于在需要最新状态的冲突解决过程中进行协作用例。来源 可能是 "user"、"api" 或 "silent"。

¥Synchronously check editor for user updates and fires events, if changes have occurred. Useful for collaborative use cases during conflict resolution requiring the latest up to date state. Source may be "user", "api", or "silent".

方法

¥Methods

update(((source: string) = 'user'));

示例

¥Examples

quill.update();

scrollRectIntoView #实验

¥scrollRectIntoView #experimental

将编辑器滚动到指定的像素位置。scrollSelectionIntoView 是通过使用当前选择的边界调用此方法来实现的。

¥Scrolls the editor to the given pixel position. scrollSelectionIntoView is implemented by calling this method with the bounds of the current selection.

scrollRectIntoView(bounds: {
  top: number;
  right: number;
  bottom: number;
  left: number;
});

示例 1

¥Example 1

// Scroll the editor to reveal the range of { index: 20, length: 5 }
const bounds = this.selection.getBounds(20, 5);
if (bounds) {
  quill.scrollRectIntoView(bounds);
}

示例 2

¥Example 2

let text = "";
for (let i = 0; i < 100; i += 1) {
  text += `line ${i + 1}\n`;
}

const quill = new Quill('#editor', { theme: 'snow' });
quill.setText(text);

const target = 'line 50';
const bounds = quill.selection.getBounds(
  text.indexOf(target),
  target.length
);
if (bounds) {
  quill.scrollRectIntoView(bounds);
}

事件

¥Events

text-change

当 Quill 的内容发生变化时触发。提供更改的详细信息、更改前编辑器内容的表示以及更改的来源。如果源来自用户，则源将为 "user"。例如：

¥Emitted when the contents of Quill have changed. Details of the change, representation of the editor contents before the change, along with the source of the change are provided. The source will be "user" if it originates from the users. For example:

• 用户在编辑器中输入内容

  ¥User types into the editor

• 用户使用工具栏设置文本格式

  ¥User formats text using the toolbar

• 用户使用热键撤消

  ¥User uses a hotkey to undo

• 用户使用操作系统拼写纠正

  ¥User uses OS spelling correction

更改可能通过 API 发生，但只要更改源自用户，提供的源仍应为 "user"。例如，当用户点击工具栏时，从技术上讲，工具栏模块会调用 Quill API 来实现更改。但是，由于更改的来源是用户的点击，因此源仍然是 "user"。

¥Changes may occur through an API but as long as they originate from the user, the provided source should still be "user". For example, when a user clicks on the toolbar, technically the toolbar module calls a Quill API to effect the change. But source is still "user" since the origin of the change was the user's click.

导致文本更改的 API 也可以使用 "silent" 源调用，在这种情况下不会触发 text-change 事件。不建议这样做，因为这可能会破坏撤消堆栈和其他依赖于完整文本更改记录的功能。

¥APIs causing text to change may also be called with a "silent" source, in which case text-change will not be emitted. This is not recommended as it will likely break the undo stack and other functions that rely on a full record of text changes.

文本更改可能会导致选择内容发生变化（例如，键入内容会使光标前进），但是在 text-change 处理程序期间，选择内容尚未更新，并且原生浏览器行为可能会使其处于不一致的状态。使用 selection-change 或 editor-change 进行可靠的选择更新。

¥Changes to text may cause changes to the selection (ex. typing advances the cursor), however during the text-change handler, the selection is not yet updated, and native browser behavior may place it in an inconsistent state. Use selection-change or editor-change for reliable selection updates.

回调签名

¥Callback Signature

handler(delta: Delta, oldContents: Delta, source: string)

示例

¥Examples

quill.on('text-change', (delta, oldDelta, source) => {
  if (source == 'api') {
    console.log('An API call triggered this change.');
  } else if (source == 'user') {
    console.log('A user action triggered this change.');
  }
});

selection-change

当用户或 API 导致选择发生变化时发出，并使用一个范围来表示选择边界。空值范围表示选择丢失（通常是由于编辑器失去焦点造成的）。你还可以将此事件用作焦点更改事件，只需检查发出的范围是否为空即可。

¥Emitted when a user or API causes the selection to change, with a range representing the selection boundaries. A null range indicates selection loss (usually caused by loss of focus from the editor). You can also use this event as a focus change event by just checking if the emitted range is null or not.

导致选择更改的 API 也可以使用 "silent" 源调用，在这种情况下不会触发 selection-change 事件。如果 selection-change 是副作用，则此方法很有用。例如，输入会导致选择发生变化，但如果在每个字符上都触发 selection-change 事件，则会产生很大的干扰。

¥APIs causing the selection to change may also be called with a "silent" source, in which case selection-change will not be emitted. This is useful if selection-change is a side effect. For example, typing causes the selection to change but would be very noisy to also emit a selection-change event on every character.

回调签名

¥Callback Signature

handler(range: { index: number, length: number },
        oldRange: { index: number, length: number },
        source: string)

示例

¥Examples

quill.on('selection-change', (range, oldRange, source) => {
  if (range) {
    if (range.length == 0) {
      console.log('User cursor is on', range.index);
    } else {
      const text = quill.getText(range.index, range.length);
      console.log('User has highlighted', text);
    }
  } else {
    console.log('Cursor not in the editor');
  }
});

editor-change

当 text-change 或 selection-change 将被触发时触发，即使源是 "silent"。第一个参数是事件名称，可以是 text-change 或 selection-change，后跟通常传递给相应处理程序的参数。

¥Emitted when either text-change or selection-change would be emitted, even when the source is "silent". The first parameter is the event name, either text-change or selection-change, followed by the arguments normally passed to those respective handlers.

回调签名

¥Callback Signature

handler(name: string, ...args)

示例

¥Examples

quill.on('editor-change', (eventName, ...args) => {
  if (eventName === 'text-change') {
    // args[0] will be delta
  } else if (eventName === 'selection-change') {
    // args[0] will be old range
  }
});

on

添加事件处理程序。有关事件本身的更多详细信息，请参阅 text-change 或 selection-change。

¥Adds event handler. See text-change or selection-change for more details on the events themselves.

方法

¥Methods

on(name: string, handler: Function): Quill

示例

¥Examples

quill.on('text-change', () => {
  console.log('Text change!');
});

once

添加一次事件触发的处理程序。有关事件本身的更多详细信息，请参阅 text-change 或 selection-change。

¥Adds handler for one emission of an event. See text-change or selection-change for more details on the events themselves.

方法

¥Methods

once(name: string, handler: Function): Quill

示例

¥Examples

quill.once('text-change', () => {
  console.log('First text change!');
});

off

删除事件处理程序。

¥Removes event handler.

方法

¥Methods

off(name: string, handler: Function): Quill

示例

¥Examples

function handler() {
  console.log('Hello!');
}

quill.on('text-change', handler);
quill.off('text-change', handler);

模型

¥Model

find

返回给定 DOM 节点的 Quill 或 Blot 实例的静态方法。在后一种情况下，传入 bubble 参数 true 将会搜索给定 DOM 的祖级，直到找到对应的 Blot。

¥Static method returning the Quill or Blot instance for the given DOM node. In the latter case, passing in true for the bubble parameter will search up the given DOM's ancestors until it finds a corresponding Blot.

方法

¥Methods

Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill

示例

¥Examples

const container = document.querySelector('#container');
const quill = new Quill(container);
console.log(Quill.find(container) === quill); // Should be true

quill.insertText(0, 'Hello', 'link', 'https://world.com');
const linkNode = document.querySelector('#container a');
const linkBlot = Quill.find(linkNode);

// Find Quill instance from a blot
console.log(Quill.find(linkBlot.scroll.domNode.parentElement));

getIndex

返回文档开头到指定 Blot 出现位置之间的距离。

¥Returns the distance between the beginning of document to the occurrence of the given Blot.

方法

¥Methods

getIndex(blot: Blot): number

示例

¥Examples

let [line, offset] = quill.getLine(10);
let index = quill.getIndex(line); // index + offset should == 10

getLeaf

返回文档中指定索引处的叶子 Blot。

¥Returns the leaf Blot at the specified index within the document.

方法

¥Methods

getLeaf(index: number): [LeafBlot | null, number]

示例

¥Examples

quill.setText('Hello Good World!');
quill.formatText(6, 4, 'bold', true);

let [leaf, offset] = quill.getLeaf(7);
// leaf should be a Text Blot with value "Good"
// offset should be 1, since the returned leaf started at index 6

getLine

返回文档中指定索引处的行 Blot。

¥Returns the line Blot at the specified index within the document.

方法

¥Methods

getLine(index: number): [Block | BlockEmbed | null, number]

示例

¥Examples

quill.setText('Hello\nWorld!');

let [line, offset] = quill.getLine(7);
// line should be a Block Blot representing the 2nd "World!" line
// offset should be 1, since the returned line started at index 6

getLines

返回指定位置包含的行。

¥Returns the lines contained within the specified location.

方法

¥Methods

getLines(index: number = 0, length: number = remaining): (Block | BlockEmbed)[]
getLines(range: Range): (Block | BlockEmbed)[]

示例

¥Examples

quill.setText('Hello\nGood\nWorld!');
quill.formatLine(1, 1, 'list', 'bullet');

let lines = quill.getLines(2, 5);
// array with a ListItem and Block Blot,
// representing the first two lines

扩展

¥Extension

debug

在给定级别启用日志消息的静态方法：'error'、'warn'、'log' 或 'info'。传递 true 等同于传递 'log'。传递 false 会禁用所有消息。

¥Static method enabling logging messages at a given level: 'error', 'warn', 'log', or 'info'. Passing true is equivalent to passing 'log'. Passing false disables all messages.

方法

¥Methods

Quill.debug(level: string | boolean)

示例

¥Examples

Quill.debug('info');

import

返回 Quill 库、格式、模块或主题的静态方法。通常，路径应该与 Quill 源代码目录结构完全映射。除非另有说明，否则修改返回的实体可能会破坏所需的 Quill 功能，因此强烈建议不要这样做。

¥Static method returning Quill library, format, module, or theme. In general the path should map exactly to Quill source code directory structure. Unless stated otherwise, modification of returned entities may break required Quill functionality and is strongly discouraged.

方法

¥Methods

Quill.import(path): any

示例

¥Examples

const Parchment = Quill.import('parchment');
const Delta = Quill.import('delta');

const Toolbar = Quill.import('modules/toolbar');
const Link = Quill.import('formats/link');
// Similar to ES6 syntax `import Link from 'quill/formats/link';`

register

注册模块、主题或格式，使其可添加到编辑器中。稍后可以使用 Quill.import 进行检索。分别使用路径前缀 'formats/'、'modules/' 或 'themes/' 来注册格式、模块或主题。对于格式，有一种简写方式，即直接传入格式，路径将自动生成。将覆盖具有相同路径的现有定义。

¥Registers a module, theme, or format(s), making them available to be added to an editor. Can later be retrieved with Quill.import. Use the path prefix of 'formats/', 'modules/', or 'themes/' for registering formats, modules or themes, respectively. For formats specifically there is a shorthand to just pass in the format directly and the path will be autogenerated. Will overwrite existing definitions with the same path.

方法

¥Methods

Quill.register(format: Attributor | BlotDefinintion, supressWarning: boolean = false)
Quill.register(path: string, def: any, supressWarning: boolean = false)
Quill.register(defs: { [path: string]: any }, supressWarning: boolean = false)

示例

¥Examples

const Module = Quill.import('core/module');

class CustomModule extends Module {}

Quill.register('modules/custom-module', CustomModule);

Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});

Quill.register(CustomFormat);
// You cannot do Quill.register(CustomModuleA); as CustomModuleA is not a format

addContainer

在 Quill 容器内添加并返回一个容器元素，与编辑器本身同级。按照惯例，Quill 模块的类名应以 ql- 为前缀。可选地包含一个 refNode，容器应该插入到该节点之前。

¥Adds and returns a container element inside the Quill container, sibling to the editor itself. By convention, Quill modules should have a class name prefixed with ql-. Optionally include a refNode where container should be inserted before.

方法

¥Methods

addContainer(className: string, refNode?: Node): Element
addContainer(domNode: Node, refNode?: Node): Element

示例

¥Examples

const container = quill.addContainer('ql-custom');

getModule

检索已添加到编辑器的模块。

¥Retrieves a module that has been added to the editor.

方法

¥Methods

getModule(name: string): any

示例

¥Examples

const toolbar = quill.getModule('toolbar');