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

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-changeeditor-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-changeselection-change事件甚至当来源为"silent"都会触发该事件。第一个参数是事件名称,text-changeselection-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-changeselection-change

方法

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

示例

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

once

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

方法

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

示例

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

off

移除时间处理程序。

方法

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

示例

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

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

猜你喜欢

转载自blog.csdn.net/WuLex/article/details/108277731
今日推荐