Create your own plugin

Go back to Home

Sub topics:

Hello plugin

Plugin lifecycle

Plugin events

Handle more DOM events

Trigger events

Best practice

Why Plugin

Roosterjs uses DOM API, Core API, Format API and built-in plugins to provide editing functionalities and the ability for customization. However, if you have the following requirement, the best way is to create your own plugin:

• I'd like to have some reaction when some event happens in editor
• I'd like to override some default behavior of editor or its built-in plugin
• I'd like to wrap editor instance and limit the access of editor instance from other components, I need a bridge between editor and other component of my project
• I'd like to extend editor functionality and be easily turned on/off and provide the functionality to 3rd part

In this section I'll introduce related concepts, how to create your own plugin, and what are the best practices.

What is RoosterJs Plugin

A RoosterJs plugin is a class implements EditorPlugin interface, and can be passed into createEditor() function or constructor of Editor class as one of the plugin array item. When editor is initialized, it will also initialize all plugins. Whenever some event happens in editor, it will broadcast the event to each plugin to allow them handle it. And finally when editor is disposed, it will dispose all plugins as well.

For more information about how to create a plugin, manage plugin lifecycle, how to handle and trigger editor events, and the best practice, please reference to the sub topics below.