TinyMCE and WordPress: Adding User Input

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.

Continue reading “TinyMCE and WordPress: Adding User Input”

TinyMCE and WordPress: Using a Button To Add Content

If you’ve been following along with this series so far, then you know I’ve been working through a series of posts that aims to show how to integrate your own button into the WordPress post editor.

My very own copy TinyMCE Editor. Show spectacular.
My very own copy TinyMCE Editor. So spectacular.

When doing this, we’re specifically working with both TinyMCE and WordPress. That is, we’re writing a TinyMCE plugin that is then wrapped in a WordPress plugin that will then allow the user to click on the button and add their own content (whatever that content may be).

In the next couple of articles, we’re going to take a look at how to do exactly that. First, we’ll start with simply connecting the result of clicking on the TinyMCE button with WordPress and then we’ll look at how to do some more advanced work.

Continue reading “TinyMCE and WordPress: Using a Button To Add Content”

Adding a TinyMCE Button to WordPress: The Button

Throughout this series, I’ve been talking through the process of how go about adding a TinyMCE button to WordPress – specifically, adding a custom button to the post editor.

Up to this point, I’ve covered a number of different things. Namely:

The thing is, we haven’t actually made anything happen in the editor let alone even introduce a button into the actual editor yet.

In this post, we’ll do exactly that.

Continue reading “Adding a TinyMCE Button to WordPress: The Button”

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.

Continue reading “Adding TinyMCE Dependencies in WordPress”

Adding a TinyMCE Button to WordPress: The Plugin

If you’re interested in adding a TinyMCE button to WordPress, then this series of articles aims to do just that. In the first post of the series, I walked through some of the basic things that need to be done in order to get started with adding a custom button.

My very own copy TinyMCE Editor. Show spectacular.
My very own copy TinyMCE Editor. So spectacular.

I laid out the file organization, the basic plugin structure, some of the foundational JavaScript, and started working on the hooks that are necessary for adding a custom button.

As it stands right now, the functions responsible for adding a new button aren’t actually defined within the context of a class much less hooked into the plugin itself. So in this post, we’ll take a look at exactly how to do exactly that.

Continue reading “Adding a TinyMCE Button to WordPress: The Plugin”