Froala Editor v4.2.1 is HereLEARN MORE

Skip to content

Custom Elements

Custom Popup

For custom popups you should do the following:

  1. Create Popup
  2. Show Popup
  3. Hide Popup

For a working example please see the Custom Popup Example

Create Popup

First we have to define a template for the custom popup and a list of buttons if necessary. The list of buttons can contain any button already defined in the editor (e.g. bold).

Secondly we can create the popup.

Define the buttons (if they haven't been defined already) from the custom popup.

Show Popup

The code below can be used to show the custom popup.

We must define the editor toolbar button that opens the custom popup:

Hide Popup

The JS code for hiding the custom popup:

Complete Example

Below is a complete example of how to create a custom popup:

Do you think we can improve this article? Let us know.