quill.js官方文档(四)【API之Editor，Events】

阳光穿透心脏的1/2处 2021-07-05 02:20 1237阅读 0赞

## `Editor` ##

### `blur` ###

让编辑器失去焦点。  
**方法**

blur()

**示例**

quill.blur();

### `disable` ###

`enable`(`false`)的快捷方法。

### `enable` ###

让通过鼠标或键盘等输入设备设置让用户能够编辑内容。当`source`为"`api`“或”`silent`"时，不影响`API`的调用。

**方法**

enable(enabled: boolean = true)

**示例**

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

### `focus` ###

焦点编辑器并恢复最后一次的选择。  
**方法**

focus()

**示例**

quill.focus();

### `hasFocus` ###

检查焦点是否在编辑器上，注意，若焦点在工具栏或提示框上，不算作在编辑器上。

**方法**

hasFocus(): Boolean

**示例**

quill.hasFocus();

### `update` ###

如果编辑器内容发生改变，同步检查用户更新和触发事件。在冲突解决方案中要求最新状态的协同案例中有作用。`Source` 可选"`user`", “`api`”, 或"`silent`"

**方法**

update(source: String = 'user')

**示例**

quill.update();

--------------------

## `Events` ##

### `text-change` ###

当Quill的内容发生改变时触发。提供改变的详情、改变之前的编辑器内容、改变的源头(`source`)。如果改变来源于用户，`soure`的值就为’`user`’。例如：

*  用户在编辑器输入
 *  用户使用工具栏设置文本格式
 *  用户使用快捷键撤回
 *  用户使用操作系统拼写修正

只要来源于用户，就可以通过`API`接口触发更改事件，这种情况，传入的`source`值一定为"`user`"。例如，当用户点击工具栏，技术上来说工具栏模块调用`Quill` API来实现更改。但传入的`source`仍然是"`user`" ，因为这个更改来自于用户的点击。

用传入`source`值"`silent`"调用引起文本改变的`API`的情况不能触发 `text-change`事件。不推荐这样做，因为这样有可能破坏撤销栈和其它依赖所有文本更改记录的函数。

改变文本可能引起选择项的变化（例如键入游标），但是在`text-change`处理过程中，选择项并未被更新，并且本地浏览器可能将其置于不一致的状态。使用`selection-change` 或 `editor-change`进行可靠的选择项更新。

**回调签名**

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

**示例**

quill.on('text-change', function(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引起选择项改变时触发，返回表示选择项边界的范围数据。空范围(`null`)表示选择项丢失（通常是因为编辑器失去焦点）。你也可以通过检查触发的范围是否为空(`null`)，来把这个事件当做一个焦点改变事件。

用传入`source`值"`silent`"调用引起文本改变的API的情况不能触发 `selection-change`事件。这对消除 `selection-change`的副作用是有用的，比如，键入会引起选择项改变，但键入每个字符都触发`selection-change`事件是很烦人的。

**回调签名**

handler(range: {  index: Number, length: Number },
            oldRange: {  index: Number, length: Number },
            source: String)

**示例**

quill.on('selection-change', function(range, oldRange, source) { 
      if (range) { 
        if (range.length == 0) { 
          console.log('User cursor is on', range.index);
        } else { 
          var 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`，接下来的是通常传递给对应处理程序的参数。

**回调签名**

handler(name: String, ...args)

**示例**

quill.on('editor-change', function(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`。

**方法**

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

**示例**

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

### `once` ###

添加只触发一次的事件处理函数。详见 `text-change` 和 `selection-change`。

**方法**

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

**示例**

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