ContentChangedEvent

Go back to Plugin events

ContentChangedEvent is triggered from several different places, and if you added some code in your plugin to modify content in editor, you should triggered this event as well.

const enum ChangeSource {
    AutoLink = 'AutoLink',
    CreateLink = 'CreateLink',
    Format = 'Format',
    ImageResize = 'ImageResize',
    Paste = 'Paste',
    SetContent = 'SetContent',
}

interface ContentChangedEvent extends PluginEvent {
    source: ChangeSource | string;
    data?: any;
}

ContentChangedEvent.source specifies the source where the event is triggered. It accepts any string and there are also some predefined values declared by ChangeSource enum. You can check the source string so that you can know why this event is triggered, and handle it accordingly. You can also trigger this event by invoking Editor.triggerContentChangedEvent() method:

public triggerContentChangedEvent(
    source: ChangeSource | string = ChangeSource.SetContent,
    data?: any
);

An optional data property contains related data of this event. The data type and value varients according to the value of source. Here's a list of how each predefined source is triggered and what's the meaning of data:

Source	Trigger	Data type	Data value
AutoLink	HyperLink plugin	HTMLAnchorElement	The new anchor element
CreateLink	createLink() API	HTMLAnchorElement	The new anchor element
Format	Editor format API (toggleBold, ...)	-	-
ImageResize	ImageResize plugin	-	-
Paste	Paste plugin	ClipboardData	The clipboard data used for pasting
SetContent	Editor.setContent() method	-	-

More info

Package: roosterjs-editor-types

Support from: 6.0.0

Source code: ContentChangedEvent.ts