[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); ```