The main new feature in version 0.2.0 of WP-Gistpen was the integration of the Gistpen button into WordPress’s TinyMCE editor. Since TinyMCE was upgraded to version 4 in WordPress 3.9, many of the current tutorials are no longer entirely accurate. Additionally, TinyMCE’s documentation is shit, so I just want to share how I integrated a button that triggers a pop-up into TinyMCE 4.
First, register the plugins and the buttons in WordPress on the proper filters:
mce_external_plugin filter registers the plugin, and the
Here’s the TinyMCE plugin code itself. Take a quick look over the whole thing, as it’s a bit complicated, but we’ll go through all of the parts step-by-step:
First, we create the plugin on line 4. Don’t forget to swap out your plugin slug.
On lines 9-14, we add the button to TinyMCE. You can edit the button text, but it doesn’t look great, or you can define its icon class and display an icon there.
cmd defines what command is run when you click the button.
Next, we register the command and open the pop-up using TinyMCE’s windowManager API.
TinyMCE has its own window API, and a number of tutorials will show you how to use it to build your own forms, which you can find and use, but I wanted more flexibility for my form. In a future version of the app, I plan to draw the form with jQuery, as it’ll be faster than requesting it via Ajax, but this was certainly easier. Here’s how this works.
On the WordPress side of the Ajax call, we just have to register a function to that returns the form.
You can then create and return a form in standard PHP!
Using some of these techniques, I actually added a search box into my form, and made it possible to create a new Gistpen from the pop-up. If you want to see how that was accomplished, check out the WP-Gistpen project on GitHub.
I’m actually writing this tutorial because of how frustratingly bad the documentation is. For a brief period, I was actually swapping out the button text and giving it a class in jQuery because I didn’t realize you could edit it yourself. Read the source next time, I guess. ↩