How to use TinyMCE APIs: a beginner's guide

Application Programming Interfaces (APIs) take input, and give you an output. They’re supporting most of the things we want to get done on our devices: checking the weather on the home screen of our phones, for example, is APIs at work. It’s the digital equivalent of a restaurant – order something off a menu and the server brings it to you (one of the old computer metaphors) as fast as they can.

When APIs are made publicly available, you can access information stored on a server, or change how a website looks. You can even put some information inputs and connect other APIs together, so that the two applications talk to each other. That’s called an API integration. 

The TinyMCE API is available publicly (versus privately, which is beyond the scope of this post) and you can use it to form functions that help customers and clients.

Practically speaking, what is an API?

Using the Tinymce Spell Checker as an example, when a word is entered into the TinyMCE WYSIWYG editor, the spell checker API activates. In this example, the input is the word entered. The API checks the word against the database, and returns alternative spelling if other spelling forms of the word are detected – that’s the output.

Now to dive into some more practical aspects, when the API is working, it sends information through the HTTPS protocol. It has a header component that introduces the input, and a method component, which is the specific action that needs to be done with whatever information is being sent (GET or DELETE for instance).

Understanding the practical steps of what an API does, and how to use it, starts with getting a grasp of the API call and response.

How to use TinyMCE API

To get started with the TinyMCE API, open any TinyMCE WYSIWYG editor in your browser. If you don’t have access to one, you can use a TinyMCE fiddle like this one, to test out the TinyMCE APIs.

Select elements in the textarea 

The first TinyMCE API that’s worth learning is the tinymce.activeEditor.getContent() call. With the fiddle mentioned above open in your browser:

1. Open the developer tools.
2. Change the view to the Console.
3. Make sure the Previewframe is selected if you are using the TinyMCE fiddle.
4. Get the content of the of the textarea:
   

   tinymce.activeEditor.getContent();
   

   COPY
5. Change the contents to text format:
   

   tinymce.activeEditorgetContent({ format: ‘text’})

   COPY
6. Change the contents to document tree format:
   

   tinymce.activeEditorgetContent({ format: ‘tree’})

   COPY

You’ve just queried, or placed input into TinyMCE using the Tiny APIs, and received output (the contents of the text area) using the same Tiny APIs. Fundamentally, those two actions of input and output, are how all APIs work.

Change elements in the textarea 

The next step is to change the contents of the textarea, and to style it with tinymce.activeEditor.setContent( ‘Hello World’); followed by tinymce.activeEditor.execCommand(‘bold’);.

With the Developer tools menu on the TinyMCE fiddle open:

1. Run the window.location.reload() command to refresh the page.
2. Run the following API call:

   tinymce.activeEditor.setContent( ‘Hello World’); 

   COPY
3. Note the change in the textarea contents.
4. Run the following API call:
   

   tinyMCE.activeEditor.execCommand("bold");
   

   COPY
5. Check the styling on the textarea. It should now have changed to bold.

The first steps in setting up TinyMCE integration

If you want to set up an API integration, you need some kind of interaction. This could be as straightforward as adding a Tiny API to an application so that a customer or anyone interacting with your project can trigger the API.

A basic API integration: a button

In HTML, button tags can have an event attached to them. When the button is clicked, the action causes the event to start. The API commands run in the console can be threaded into a button action, which is the first step towards integration. So let’s get a button configured. 

How to integrate APIs with TinyMCE

1. Start with a basic application featuring TinyMCE, such as this TinyMCE Fiddle.
2. In the page HTML, add in the button tag: <button>Select All</button>
3. Give the button tag the ‘onclick’ function with the select all API action:
   

   onclick = "tinyMCE.activeEditor.execCommand('selectall');";
   

   COPY
4. Save the page.
5. Load the page in your browser.

The HTML should look like this: 

<script type="text/javascript">
tinymce.init({
  selector: "textarea",
  plugins: [
        "advlist autolink lists link image charmap print preview anchor",
    ],
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"><p>API's allow you to interact with a software Application without a user interface (headless)</p><ul><li>API's should be predictable</li><li>API function names say what they do</li><li>API's doing similar things are grouped together in a common namespace</li></ul></textarea>
</form>

<button onclick="tinyMCE.activeEditor.execCommand('selectall');">Select All</button>

Tiny APIs act as building blocks within a company’s larger IT and dev software toolkit. Now that you’ve set up an application with a button, you’ve taken your first step towards an API integration, and you’ve expanded your software toolkit.

Don’t forget

You can always test the TinyMCE APIs in the browser console first. This is just a quick initial step that you can take to get a feel for the TinyMCE APIs and what they’re doing for the creators and writers working in your rich text editor. When you’ve reached the point of understanding what the API does, you can then move on to integrations.

If you’d like to start experimenting with a project and TinyMCE’s APIs, you can sign up for a free API key, and share your project with us on our social media pages, or on our GitHub.