TinyMCE 5 Plugin Playground

A working demo to help developers play with working examples of custom external plugins for TinyMCE 5.

This includes the following plugins:

• Hello World showing Dialog and Custom Icons (read the blog post) View Source Code
• Flags demonstrating Autocompleter (read the blog post) To use the Flags plugin, type the trigger character '#' and start typing a country name - filter options will be shown when at least one character is typed. For ease of development, the Flags plugin requires browser support for Fetch - basically modern browsers (sorry, that means you IE users). You could re-work these requests to use older technologies if you need. View Source Code
• iframe-simple demonstrating a simple URL Dialog Component (read the blog post) This is great for looking at a basic simple example of setting up the URL Dialog UI Component. View Source Code
• iframe demonstrating the URL Dialog UI Component and Window Messaging (read the blog post) This is great for getting in to some more advanced concepts including two way messaging (and different ways to accomplish this). View Source Code

TinyMCE is made by Tiny. This example is using the cloud-hosted testing version, and you will get an API Key warning unless you register for your own API Key.

You can use the included package.json to pull in TinyMCE 5 for local use. Just update the src of the script tag above to point to your local version.

SVG path data from Icomoon's Free library (CC BY 4.0)

Country and Flag data from REST Countries.

Styling using the standard CDN build of Bulma.