New to Kendo UI for Angular? Start a free 30-day trial

ProseMirror Plugins

The Editor component is based on the ProseMirror library. ProseMirror provides a set of tools and concepts for building rich text editors, using user interface inspired by what-you-see-is-what-you-get. The ProseMirror plugin system enables developers to create custom tools and functionality.

One of the main building blocks of each editor is its EditorState object. The state is created through a static create method which takes a configuration object, containing the starting document node, the schema, and a collection of plugins which will be active in this state.

Plugins are instances of the Plugin class, and can model a wide variety of features. The simplest ones just add some props to the editor view, for example to respond to certain events. More complicated ones might add new state to the editor and update it based on transactions.

Further details about the ProseMirror plugins are available in this guide.

Custom Plugins

Following the ProseMirror concepts, the Kendo UI for Angular Editor provides a set of built-in plugins, enabling various functionalities (like history, key bindings, placeholder), and also allows you to extend and customize its functionality and features by using custom plugins.

To provide custom plugins, bind the Editor plugins option to a callback which exposes the default set of plugins, and returns a new Plugin array.

    @Component({
    selector: 'my-app',
    template: `
        <kendo-editor [plugins]="myPlugins"></kendo-editor>
    `
    export class AppComponent {
        public myPlugins = (args: Plugin[]) => [...args, this.myPlugin];

        private myPlugin = new Plugin({
            // the plugin configuration object
        });
    }

Setting custom plugins is possible only once - upon the initialization of the Editor component. Further changes will not be reflected, and the Editor will continue using the initially provided plugins.

Popup Tools

You can implement a plugin that shows a popup which contains additional tools, or supplementary information based on the user selection.

The following example demonstrates how to show a search icon above the Editor selection, and perform a Google search with the selected text when clicking the icon.

Example
View Source
Edit In Stackblitz  
Change Theme:

Input Rules

Input rules provide an option for modifying the input of the user on the fly and represent pairs of matches and corresponding actions. When the user input matches an input rule, the typed text is transformed based on the action of that rule.

Further details about the ProseMirror InputRule class and its properties and utility functions are available in the ProseMirror documentation

The following example demonstrates how to implement input rules which transform markdown statements, followed by space ("␣"), into their respective HTML alternatives. For example, typing '##' and pressing space will yield an <h2> tag in the Editor value.

Input rules in the example:

  • Converts '- ' or '+ ' to a bullet list.
  • Converts '1. ' or another number to an ordered list.
  • Converts '# ', '## ', '### ', '#### ', '##### ', '###### ' into heading 1, 2, 3, 4, 5, and 6, according to the '#' characters count.
  • Converts three backticks '```' to a code block.
  • Converts double dashes to an emdash.
  • Converts three dots to an ellipsis character.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?