v4.x.x Custom Extensions with Forms

Extensions With Forms

medium-editor's built-in anchor button allows the user to enter a url and check optional checkboxes inside the medium-editor toolbar. This is known as a form for an extension.

The AnchorExtension is implemented in a way that other extensions may also leverage the toolbar as a place to gather user input.

In addition to the other requirements for v4.x.x Custom Extensions, the following are required for adding a extension which displays a form inside the toolbar:

• Extensions With Forms
  • Required Properties
    • .hasForm (boolean)
  • Required Methods
    • .getForm()
    • .hideForm()
    • .isDisplayed()
  • Examples

Required Properties

.hasForm (boolean)

For extensions that have forms, this property must be set to true. This signifies to medium-editor that this extension has more logic for hiding/showing a form.

Required Methods

.getForm()

This method should return the element to insert into the toolbar itself. When creating the toolbar, after medium-editor creates the set of buttons to display, it will call this method on each extension where .hasForm is true and append the result into the toolbar element itself

.hideForm()

This method will be called by medium-editor when the form element should be hidden so that other elements can be displayed in the toolbar.

.isDisplayed()

This method should return true or false, reflecting whether this form is currently displayed or not.

Examples

The AnchorExtension in the medium-editor repo is an example of an extension which has a form that accepts user input via the toolbar.

The TableExtension in the demos directory is an example of an extension that reuses code from the AnchorExtension to build an extension that allows the user to insert a table with a custom number of columns and rows.

You can find a working demo of this TableExtension if you fork the repo and view the /demo/table-extension.html page.