Events

text-change

Quill内容改变时触发。提供了具体的变化细节，以及更改前的内容，还有更改的来源。如果更改来自用户那么来源为：‘user’。例如：

  • 用户向编辑器中输入

  • 用户通过工具栏格式化文本

  • 用户通过快捷键执行撤销操作

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

通过API也可能会发生更改，但是只要他们来自用户，提供的来源仍然是‘user’。例如：当用户点击了工具栏，工具栏模块在技术上是调用Quill API来实现更改。但是来源仍然是‘user’，因为更改的根源是用户的点击。

导致文本变化的API的来源可能为silent，这种情况下text-change将不会被调用执行。这个操作是不被推荐的，应为它可能会打破撤销堆栈和其他依赖于文本更改的完整记录功能。

对文本的更改可能导致对其他选项的更改（如：光标移动），然而在text-change处理期间，其他选项尚未被更新，并且本地浏览器行为可能会使其处于不一致的状态。使用selection-change或者editor-change来获取可靠的选择更新。

回调函数

  1. handler(delta: Delta, oldContents: Delta, source: String)

例子

  1. quill.on('text-change', function(delta, oldDelta, source) {
  2.   if (source == 'api') {
  3.     console.log("An API call triggered this change.");
  4.   } else if (source == 'user') {
  5.     console.log("A user action triggered this change.");
  6.   }
  7. });

selection-change

当用户或者API导致选择改变时调用，选择的范围作为界限。一个空范围表示选择丢失（通常由编辑器失去焦点引起）。你也可以通过检查调用事件的范围是否为空用作焦点更改事件。

导致选择更改的API也可以是slient，这种情况下selection-change将不会被调用执行。如果selection-change存在副作用，这个是很有用的。例如：输入能够导致选择改变，但是如果每个字符都调用selection-change的话会变得非常混乱。

回调函数

  1. handler(range: { index: Number, length: Number },
  2.         oldRange: { index: Number, length: Number },
  3.         source: String)

例子

  1. quill.on('selection-change', function(range, oldRange, source) {
  2.   if (range) {
  3.     if (range.length == 0) {
  4.       console.log('User cursor is on', range.index);
  5.     } else {
  6.       var text = quill.getText(range.index, range.length);
  7.       console.log('User has highlighted', text);
  8.     }
  9.   } else {
  10.     console.log('Cursor not in the editor');
  11.   }
  12. });

editor-change

当text-change或者selection-change执行后会被调用执行，甚至来源是silent。第一个参数是事件名称，是text-change或者selection-change，随后的通常是传入处理函数的参数。

回调函数

  1. handler(name: String, ...args)

例子

  1. quill.on('editor-change', function(eventName, ...args) {
  2.   if (eventName === 'text-change') {
  3.     // args[0] 将是Delta
  4.   } else if (eventName === 'selection-change') {
  5.     // args[0] 将是就得范围
  6.   }
  7. });

on

添加事件监听。有关事件本身的更多信息，请参阅text-change或者selection-change。

方法

  1. on(name: String, handler: Function): Quill

例子

  1. quill.on('text-change', function() {
  2.   console.log('Text change!');
  3. });

off

删除事件监听。

方法

  1. off(name: String, handler: Function): Quill

例子

  1. function handler() {
  2.   console.log('Hello!');
  3. }
  5. quill.on('text-change', handler);
  6. quill.off('text-change', handler);

once

为一个方法添加第一次执行的事件。有关事件本身的更多信息，请参阅text-change或者selection-change。

方法

  1. once(name: String, handler: Function): Quill

例子

  1. quill.once('text-change', function() {
  2.   console.log('First text change!');
  3. });