In the engine, we handle many events by default, such as: text input, delete, copy, paste, left and right arrow keys, markdown syntax input monitoring, plugin shortcut keys, and so on. These events may have different processing logic at different cursor positions. Most operations are to modify the DOM tree structure and repair the cursor position. In addition, we also expose these events to the plugin to handle by itself.
Method signature
/*** Bind event* @param eventType event type* @param listener event callback* @param rewrite whether to rewrite*/on(eventType: string, listener: EventListener, rewrite?: boolean): void;/*** Remove bound event* @param eventType event type* @param listener event callback*/off(eventType: string, listener: EventListener): void;/*** trigger event* @param eventType event name* @param args trigger parameters*/trigger(eventType: string, ...args: any): any;
In javascript, we usually use document.addEventListener document.removeEventListener to bind DOM element events. In the engine, we abstract an EventInterface
type interface, and elements of the NodeInterface
type are bound to an attribute event of the EventInterface
type. So as long as the element of type NodeInterface
can be bound, removed, and triggered by on off trigger. Not only can bind DOM native events, but also custom events
const node = $('<div></div>');//Native eventnode.on('click', () => alert('click'));//Custom eventnode.on('customer', () => alert('customer'));node.trigger('customer');
We have processed the specific combination of keys. The following are some of the events we exposed, which are effective in both editing mode and reading mode.
//engineengine.on('event name', 'processing method');//readview.on('event name', 'processing method');
keydown:all
Select all ctrl+a key press, if it returns false, stop processing other monitors
/*** @param event key event* */(event: KeyboardEvent) => boolean | void
card:minimiz
Triggered when the card is minimized
/*** @param card card instance* */(card: CardInterface) => void
card:maximize
Triggered when the card is maximized
/*** @param card card instance* */(card: CardInterface) => void
parse:value-before
Triggered before parsing DOM nodes and generating standard editor values
/*** @param root DOM root node*/(root: NodeInterface) => void
parse:value
Parse the DOM node, generate the editor value that meets the standard, and trigger when it traverses the child nodes. Return false to skip the current node
/*** @param node The node currently traversed* @param attributes The filtered attributes of the current node* @param styles The filtered style of the current node* @param value The currently generated editor value collection*/(node: NodeInterface,attributes: {[key: string]: string },styles: {[key: string]: string },value: Array<string>,) => boolean | void
parse:text
Parse the DOM node, generate the text, and trigger when it traverses the child nodes. Return false to skip the current node
/*** @param node The node currently traversed* @param attributes The filtered attributes of the current node* @param styles The filtered style of the current node* @param value The currently generated text*/(node: NodeInterface,attributes: {[key: string]: string },styles: {[key: string]: string },value: Array<string>,) => boolean | void
parse:value-after
Analyze DOM nodes and generate editor values that conform to the standard. Triggered after generating xml code
/*** @param value xml code*/(value: Array<string>) => void
parse:html-before
Triggered before conversion to HTML code
/*** @param root The root node to be converted*/(root: NodeInterface) => void
parse:html
Convert to HTML code
/*** @param root The root node to be converted*/(root: NodeInterface) => void
parse:html-after
Triggered after conversion to HTML code
/*** @param root The root node to be converted*/(root: NodeInterface) => void
copy
Triggered when DOM node is copied
/*** @param node The child node currently traversed*/(root: NodeInterface) => void
change
Editor value change event
/*** @param value Editor value* */(value: string) => void
select
Editor cursor selection trigger
() => void
focus
Triggered when the editor is focused
() => void
blur
Triggered when the editor loses focus
() => void
beforeCommandExecute
Triggered before the editor executes the command
/*** @param name Execute plugin command name* @param args command execution parameters* */(name: string, ...args: any) => void
afterCommandExecute
Triggered after the editor executes a command
/*** @param name Execute plugin command name* @param args command execution parameters* */(name: string, ...args: any) => void
drop:files
Triggered when a file is dragged to the editor
/*** @param files file collection* */(files: Array<File>) => void
beforeSetValue
Triggered before assigning a value to the editor
/*** @param value Editor value* */(value: string) => void
afterSetValue
Triggered after assigning a value to the editor
/*** @param value Editor value* */(value: string) => void
readonly
Triggered when the editor's read-only attribute is changed
/*** @param readonly is read-only* */(readonly: boolean) => void
paste:event
Triggered when the paste to editor event occurs, if it returns false, the paste will not be processed
/*** @param data Pasteboard related data* @param source pasted rich text* */(data: ClipboardData & {isPasteText: boolean }, source: string) => boolean | void
paste:schema
Set the structural rules of the DOM elements that need to be retained for this pasting, and the structural rules that the attributes need to retain
/*** @param schema Schema object, you can add, modify, delete and other operations to the structure rules* */(schema: SchemaInterface) => void
paste:origin
Parse the pasted data, and trigger before generating a fragment that matches the editor data
/*** @param root pasted DOM node* */(root: NodeInterface) => void
paste:each
Analyze the pasted data, generate a fragment that matches the editor data, and then cyclically organize the sub-elements to trigger
/*** @param node Paste the element child nodes traversed by the fragment* */(root: NodeInterface) => void,
paste:each-after
Analyze the pasted data, generate a fragment that matches the editor data, and then cycle through the sub-element stage to trigger
/*** @param node Paste the element child nodes traversed by the fragment* */(root: NodeInterface) => void
paste:before
After the DOM fragment is generated from the pasted data, it is triggered before it is written to the editor
/*** @param fragment pasted fragment* */(fragment: DocumentFragment) => void
paste:insert
Triggered after inserting the currently pasted fragment, the card has not been rendered yet
/*** @param range cursor instance after current insertion* */(range: RangeInterface) => void
paste:after
Triggered after the paste action is completed
() => void
operations
Triggered by DOM changes, these operational changes are usually sent to the collaborative server for interaction
/*** @param operations operation item* */(operations: Operation[]) => void
keydown:enter
Press the enter key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:backspace
The delete key is pressed, if it returns false, the processing of other monitors is terminated
(event: KeyboardEvent) => boolean | void
keydown:tab
Tab key is pressed, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:shift-tab
Press the Shift-Tab key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean |void
keydown:at
@ The corresponding key is pressed, if it returns false, the processing of other monitors will be terminated
(event: KeyboardEvent) => boolean | void
keydown:space
Press the space bar, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:slash
Press the backslash key to call out the Toolbar, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:left
Press the left arrow key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:right
Press the right arrow key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:up
Press the up arrow key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keydown:down
Press the down arrow key, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keyup:enter
Press the enter key to bounce up, if it returns false, stop processing other monitors
(event: KeyboardEvent) => boolean | void
keyup:backspace
Press the delete button to pop up, if it returns false, terminate the processing of other monitors
(event: KeyboardEvent) => boolean | void
keyup:tab
Tab key presses and pops up, if it returns false, terminate the processing of other monitors
(event: KeyboardEvent) => boolean | void
keyup:space
Press the space bar to pop up, if it returns false, terminate the processing of other monitors
(event: KeyboardEvent) => boolean | void
render
Triggered after the reader has finished rendering
/*** @param node render root node* */(node: NodeInterface) => void