

We’ll also add two buttons, and an “onAction” handler for when our “action” button is pressed, plus a width and height. The configuration Is a simple object – at a minimum, you need to provide a title and url for your configuration. This is what we’ll open in the URL Dialog. Mine is called “iframe.html”, and is in the same folder as my main TinyMCE page. Heck, a “Hello World” paragraph would do. To get started, make a new HTML file, and put some content in there. Start with the basics – let’s make a plugin that opens an external URL in an iframe. Ultimately there is so much potential for the URL Dialog components - and I have so many ideas for how to integrate smart-looking iframes in to my projects. Where interfaces fall outside the UI library altogether Interfaces that require more complex layouts that the v5 UI Components can't replicate I know for any implementations that I make, the focus will be on creating a quality (and attractive) user experience.Įxternal link browsers (that hook in to your CMS and can help insert valid links for example) Sure, it may not be identical, but some developers do have the ability to create… uh… questionable interfaces. But developing complex interfaces with the Tiny UI Components is a bit restrictive – so the ability to use an iframe does allow for complex interface design.īut now the onus is on the developer to create a good user experience, and one that is on par with that provided by the Tiny UI Components. The UI Component library that launched with TinyMCE 5 gives users a brilliant and consistent experience. Just because you can, does that mean you should? Short answer, of course, longer answer… if you can make it look good. This opens up so much potential for developing complicated interfaces in an iframe but still have rich and user-friendly interactions with TinyMCE.īefore you go on, this is an advanced topic – if you’re new to working with TinyMCE 5 plugins, check out my “Hello World” blog post to get you started with writing a plugin.Īs always, refer to the Tiny URL Dialog documentation for full details.īut. Have TinyMCE send messages back to your iframe The way the team have implemented this makes it incredibly easy to: It’s that last part that gets me excited. So let’s start with the basics: what exactly is it? It’s a new UI Component that allows you to open an external URL in an iframe, and have easy two-way messaging between TinyMCE (and any plugins you create) and the iframe itself. The Tiny team heard the outcry, and have implemented a new URL Dialog UI Component.

When TinyMCE 5 launched, there was a bit of an outcry that iframe support for dialogs had been removed – so much so that it stopped many developers from upgrading.
