[TOC] ## text-change <!-- 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: --> 当Quill的内容发生改变时触发。提供改变的详情、改变之前的编辑器内容、改变的源头(source)。如果改变来源于用户，soure的值就为'user'。例如： <!-- User types into the editor User formats text using the toolbar User uses a hotkey to undo User uses OS spelling correction --> - 用户在编辑器输入 - 用户使用工具栏设置文本格式 - 用户使用快捷键撤回 - 用户使用操作系统拼写修正 <!-- 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接口触发更改事件，这种情况，传入的source值一定为`"user"`。例如，当用户点击工具栏，技术上来说工具栏模块调用Quill API来实现更改。但传入的source仍然是`"user"` ，因为这个更改来自于用户的点击。 <!-- 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. --> 用传入source值`"silent"`调用引起文本改变的API的情况不能触发 `text-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`](#selection-change) or [`editor-change`](#editor-change) for reliable selection updates. --> 改变文本可能引起选择项的变化（例如键入游标），但是在`text-change`处理过程中，选择项并未被更新，并且本地浏览器可能将其置于不一致的状态。使用[`selection-change`](#selection-change) 或 [`editor-change`](#editor-change)进行可靠的选择项更新。 **回调签名** ```javascript handler(delta: Delta, oldContents: Delta, source: String) ``` **示例** ```javascript 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 <!-- 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引起选择项改变时触发，返回表示选择项边界的范围数据。空范围(null)表示选择项丢失（通常是因为编辑器失去焦点）。你也可以通过检查触发的范围是否为空(null)，来把这个事件当做一个焦点改变事件。 <!-- 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. --> 用传入source值`"silent"`调用引起文本改变的API的情况不能触发 `selection-change`事件。这对消除 `selection-change`的副作用是有用的，比如，键入会引起选择项改变，但键入每个字符都触发`selection-change`事件是很烦人的。 **回调签名** ```javascript handler(range: { index: Number, length: Number }, oldRange: { index: Number, length: Number }, source: String) ``` **示例** ```javascript 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 <!-- 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. --> `text-change` 或 `selection-change`事件甚至当来源为`"silent"`都会触发该事件。第一个参数是事件名称，`text-change`或 `selection-change`，接下来的是通常传递给对应处理程序的参数。 **回调签名** ```javascript handler(name: String, ...args) ``` **示例** ```javascript 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 <!-- Adds event handler. See [text-change](#text-change) or [selection-change](#selection-change) for more details on the events themselves. --> 添加时间处理程序。详见 [text-change](#text-change) 和 [selection-change](#selection-change)。 **方法** ```javascript on(name: String, handler: Function): Quill ``` **示例** ```javascript quill.on('text-change', function() { console.log('Text change!'); }); ``` ## once <!-- Adds handler for one emission of an event. See [text-change](#text-change) or [selection-change](#selection-change) for more details on the events themselves. --> 添加只触发一次的事件处理函数。详见 [text-change](#text-change) 和 [selection-change](#selection-change)。 **方法** ```javascript once(name: String, handler: Function): Quill ``` **示例** ```javascript quill.once('text-change', function() { console.log('First text change!'); }); ``` ## off <!-- Removes event handler. --> 移除时间处理程序。 **方法** ```javascript off(name: String, handler: Function): Quill ``` **示例** ```javascript function handler() { console.log('Hello!'); } quill.on('text-change', handler); quill.off('text-change', handler); ```