Adding TinyMCE Dependencies in WordPress

If you’ve been following along with previous articles you know that over the last few days I’ve been working through a series on adding a TinyMCE button to WordPress.

Though this post isn’t exactly part of that series, it’s tangentially related and I thought it was something worth covering in case someone else stumbles across their problem in their work or if the code that shows up later in said series shows what’s up but doesn’t do a great job explaining it.

In short, when you have a JavaScript file that is a dependency on the core plugin, there’s another way of adding the dependency that does not include wp_enqueue_script.

TinyMCE Dependencies in WordPress

Remember that when adding a button to the post editor in WordPress, a portion of the code is going to be writing a plugin for the TinyMCE editor (since that’s what the actual post editor is).

In a sense, you’re placing a plugin within a plugin. That is, you’re placing a TinyMCE plugin within a WordPress plugin.

Anyway, in an attempt to modularize the code, you’ll likely have at least a couple of files that power the plugin – one of which that will be specifically for the TinyMCE button and one of which that will be specifically for other logic that fires when the button is clicked (like displaying a modal or something like that).

TinyMCE Dependencies

In WordPress, when we need to add JavaScript files, we typically use a hook (either for the front-end or the dashboard) and include the file via PHP; however, if you’re working with the post editor, Ajax, and multiple files, then you have to do something different.

Again, this assumes that you’re working with Ajax so you’re likely pulling in information from another file.

In order to make sure the dependencies are properly added, then you’ll need to take advantage of jQuery’s getScript function. As per the API, this function will:

Load a JavaScript file from the server using a GET HTTP request, then execute it.

For the purists, you don’t have to use jQuery, but since it’s included in WordPress and generally used for most WordPress-based code, I’ve opted to use it in this example.

Anyway, recall from one of the previous posts that the TinyMCE-specific JavaScript has an init method. Later in the series, we’ll talk about some of the things that are to be included in that method but one of the things that’s needed is adding a command to the post editor button.

But let’s say that when the button fires, we need our secondary JavaScript file to be added and for its code to be executed. To do this, we make a call to getScript, add the file, and then run the rest of our code.

The gist of the code looks something like this:

Note that in the code above, I’m making a call to acme_init_selector. This method is actually defined in the dependency that’s being added via getScript so this is how to can set the whole thing in motion.

I’ll likely expand on this more in a future post.

Anyway, as previously mentioned, I’ll talk more about the rest of the code that will reside in the init method later in the series, but I wanted to make sure I covered and explained this particular aspect of writing the plugin in its own post.

It’s something that may be useful for those who are already doing work with the post editor, and it’s also something that would take a bit longer to explain within the context of another post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.