Using TinyMCE outside of WordPress

Recently we had to setup a TinyMCE WYSIWYG outside of WordPress so we couldn’t use the wp_editor function.

TinyMCE has changed a lot since I last used it as a stand alone feature so I wanted to make a post about how to set this up so I don’t have to look around for this info again.

Step number one is setting up the script, like so

Unfortunately you do need to setup an account and get an API key in order to correctly use TinyMCE. You also need to setup the domains you want this script to work on, this is done in your TinyMCE account.

Once we have that in place we can setup our WYSIWYG!

And there we go! That is all you need to get a basic TinyMCE instance going.

NOTE: I had to make sure I had the editor.on(‘change’) function working or else my textarea wasn’t updating quite right. You might not need this for your use case.

TinyMCE also offers additional plugins which are really neat, unfortunately they require paying a monthly subscription 🙁

If you are using TinyMCE in multiple places and NEED those plugins, it would definitely be worth it, but the default functionality is probably good enough for most users.

Get Content from TinyMCE (aka WordPress WYSIWYG)

Some times we need to allow a user to work on a WordPress WYSIWYG outside of the normal places. I had to setup an email form along with an HTML email preview based on content in a WYSIWYG. So I needed to get the content out of the TinyMCE editor in order to update the Email preview. It was a little tricky to find the right solution online so I am saving it here.

My favorite answer for this solution can from StackOverflow

 

Add Button to TinyMCE

The recommended way of doing this is by creating a plugin. That is definitely an option and the same instructions apply.

This post will describe how to setup a basic “Call to Action” button which will put a shortcode into the editor with a title and link (shortcode instructions not included).

To begin you need to setup a couple of actions / filters like so.

Next, you need to setup the functions those actions / filters are calling.

Now we just need to create the Javascript file. This will contain all of the functionality. I am just going to dump the code and let you figure out how it is working.

By now if you check out your WordPress WYSIWYG editor you should already have a functional TinyMCE button of your own!

9zvlcnjc

We have also loaded a CSS file which you can use to edit your plugin styles. There are a couple ways to edit the style of your plugin but feel free to use your favorite method (inline, CSS Style enqueue, or TinyMCE CSS call – see TinyMCE plugin page)

There ya go! Your very own TinyMCE plugin!