Using Plugins

The React Editor, part of KendoReact, allows you to extend and customize its functionality and features by using plugins.

Popup Tools

You can implement a plugin that renders a popup in the Editor and shows additional tools or supplementary information based on user selection.

Example
View Source
Change Theme:

Placeholders

You can use a plugin to provide a placeholder functionality for the Editor which is similar to the placeholder attribute of the HTML input element.

Example
View Source
Change Theme:

Read Only

A Read-Only functionality can be implemented using a plugin as well.

The following example demonstrates how to implement a plugin which provides Read-Only functionality.

Example
View Source
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.

The following example demonstrates how to implement input rules and attach them to the Editor.

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 '> ' into a blockquote.
  • Converts double dashes to an emdash.
  • Converts three dots to an ellipsis character.
  • Converts an URL to a link.
  • Converts '!image[https://image-path/something.png]' to image.
Example
View Source
Change Theme: