In the previous post in this series, I showed how to add content to the post editor using a custom TinyMCE button. The problem with the approach, as we’ve covered thus far, is that the content that we’re adding to the editor is hard-coded.

We’re rarely going to want to be doing this, right? I mean, wouldn’t we rather grab input from the user and then add that to the editor?

My very own copy TinyMCE Editor. Show spectacular.

My very own copy TinyMCE Editor. So spectacular.

For some, this may be creating a shortcode based on some input, for others it may be grabbing input, making an Ajax call, and then putting the result of the request into the editor, or it may be something as simple as taking whatever input the user has provided in a prompt and then adding it to the editor.

Though the latter case is not likely something that is a realistic use case (after all, if they just wanted to put something into the editor, why not just, you know, enter it into the editor?), it’s something that will make rounding out this series a bit more complete because it will show how to connect displaying a prompt to the user, grabbing the input, then using the TinyMCE API to drop the input into the editor.

So that’s what we’ll do.

User Input with TinyMCE and WordPress

I’m going to pick up exactly where I left off in the last post, so recall that the last bit of code that we saw was as follows:

The API call that you see above is being made from a JavaScript file to the TinyMCE API. It’s taking the final argument (the sentence about the content to add to the editor) and then adding that into the WordPress post editor.

So, as you can imagine, we can replace that sentence with a variable that contains whatever output we need to add to our content. In our case, we’re going to be using the built in JavaScript prompt function in order to grab some input from the user.

Note that I don’t really recommend using this particular function for a number of reasons (security being one of them), but it’s easy to implement, makes it easy to read input from the user (whether or not they’ve specified anything), and then makes it easy to connect to the TinyMCE API.

In order to do that, let’s first create a function that will prompt the user to simply answer the question: What is your name?

Then, we’ll return the result of the prompt:

Of course, the user may not enter anything or the user may click “Cancel.” If that’s the case, then we need to set a default value of the string so that something is returned and can be entered into the post editor. In order to handle this, we’ll introduce a conditional into the code:

At this point, we can tie everything together such that we prompt the user for their name and then write the result to the editor:

Even if they don’t provide an answer, something will be written into the post editor.

More Advanced Use Cases

Obviously, this is a really simple article with a very, very basic use case. But the point isn’t to show how complicated something can be – after all, we’re all building different things so it would be hard for me to capture a use case that would work for everyone.

As mentioned at the beginning of the article, the actual use case of what we’ve shown here is kind of weak. That is, if the user wants to input information into the post editor, then s/he might as well do it; however, the purpose of the article isn’t to show how to simply grab input from the user and drop it into the editor.

Instead, it’s meant to show how to use the TinyMCE API to grab something from the user then add it to the editor.

Taking this a step further, you may be more interested in, say, displaying a modal dialog, having the user specify some input, make an Ajax request, then drop the result of the request into the editor.

Anyway, whatever the case, I hope this series has been helpful in terms of showing how to interface with the TinyMCE API for adding your own buttons, capturing input, and adding it to the post editor in WordPress.


Join the conversation! 3 Comments

  1. Do you have any idea how I might do something that interacts with the WordPress Media Selector? For instance, I have a shortcode that requires the IDs of two images. I’d like to open the media selector, grab an ID, and then save it for insertion into the shortcode. Do you think that’s possible?

    • Do you have any idea how I might do something that interacts with the WordPress Media Selector?

      Yep – first, see this tutorial. It will walk you through what you need to know to create your own implementation of the uploader.

      Do you think that’s possible?

      I do — you’ll need to do some wrangling with JavaScript and with extending the TinyMCE editor via a plugin which I’ve talked a little bit about here and it should be enough to get you started.

      I hope this helps!

  2. Hey Tom! Thanks for the reply. I was able to sort of hack something together using Promises, which I’ve posted here:

    And is also contained in this repo:

    the code is pretty ugly but at least it works, for now. If I figure out something prettier I’ll post here as well, for the record.

Leave a Reply