API integrations and getting the most from TinyMCE’s APIs

APIs… they’re everywhere, and everyone relies on them. But because of how common they are, you need to know how to use them, and how to use the tools that support them. It’s a big challenge

Sure, APIs are essential for your development journey. And API integrations are one of the most important aspects of data exchange – they’re an essential utility for application design. But there’s just one problem: knowing where to start, with the sheer amount of API information out there.

Setting up your requirements before you start designing helps narrow down your API selection. Is text entry something your app requires? Text entry usually turns up in apps where there’s a form, a messaging interface, a commenting feature, or even note taking.

What helps narrow down the number of API to handle is selecting a text entry component with an effective and easy-to-use set of API methods.

TinyMCE is a reliable and powerful rich text editor that you can integrate into your projects, and at the same time, provides an easy to integrate API set. One of the greatest advantages of TinyMCE is that it offers an array of APIs that simplify text entry requirements.

That’s what this article covers: it introduces TinyMCE’s APIs. It explains how they work, as well as some best practices for using them effectively. It also covers API integrations, and how TinyMCE’s APIs can potentially integrate with other API services out there to provide you with an opportunity to learn more. In short, if you want to learn more about APIs, start here.

Why are APIs important?

Application Programming Interfaces (APIs) are a set of protocols that enable software systems built from different languages to exchange data, and make sense of information. APIs are important because they’re a connection (or a vital intermediary) between different software that would otherwise be unable to share data. And applications can provide more and be more effective for users, when they can exchange data on request.

What is API integration?

The API integration is the connection between the various software. When a user sends a request through their application, it’s an API integration that carries the request from the app to a remote server and back to the users.

Here’s a basic example of how TinyMCE APIs could work in a demo integration:

1. Set up a variable that runs a GET request (the most commonly used API method). This can be any project or service you want to integrate with. For example, the Open Meteo Weather API, or the Marvel Developer Portal API.

For instance:

const comics_url = "https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=W&apikey=<your-api-key>"
const weather_url = “https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m”

2. Run the GET request  – this example has an asynchronous function with JavaScript fetch to start the GET request:

async function apiGET(url) {
  const integrateStep1 = await fetch(url);
  var apiData = await integrateStep1.json();
  console.log(apiData);
}

3. With the API you want to integrate available as a JSON object, you can then parse it into HTML for TinyMCE to interpret, and then integrate the API response into the editor using TinyMCE’s APIs.

For example, setting the content could involve parsing the JSON data, and then running the TinyMCE setContent API method to include the data in the text area.

Why use TinyMCE’s APIs?

TinyMCE’s APIs manage white space, text formatting, image uploads, and alert dialogs, among other elements, helping you create visually appealing sites and applications with minimal time and effort. 

Make use of them to save development time creating custom solutions yourself.

• You can use the API’s efficient functionality to provide new features, and offer a flexible, maintainable product to your end users.
• You can also work on your API integrations, and connect external data to the text area as needed, using the APIs to change the text area to fit your needs.

Overview of TinyMCE APIs

TinyMCE offers six JavaScript API categories that cover various aspects of the editing process:

1. tinymce
2. tinymce.dom
3. tinymce.editor.ui
4. tinymce.geom
5. tinymce.html
6. tinymce.util

For more in-depth details on each, check the official documentation.

1. tinymce

tinymce is the editor’s global API, which comprises a number of classes that handle tasks such as working with environment variables like browser versions, managing keyboard shortcuts, and building native windows and dialogs.

2. tinymce.dom

tinymce.dom works with the document object model (DOM), which defines the document structure. The API offers multiple classes for handling operations:

• BookmarkManager, which handles all aspects of selection bookmarks
• DOMUtils, which handles DOM manipulation and retrieval functions like creating or adding elements, encoding a string, or returning specified nodes
• StyleSheetLoader, which handles loading or unloading of external stylesheets.

3. tinymce.editor.ui

tinymce.editor.ui registers user interface (UI) components. This includes two classes:

• Ui, is the ui instance for the editor
• Registry, which is the UI registration API for TinyMCE 5.

4. tinymce.geom

tinymce.geom creates, calculates, and positions rectangle objects.

5. tinymce.html

tinymce.html works with various aspects of HTML. It includes classes such as:

• DomParser, which parses the document and removes extra white space
• Styles, which parses and compresses CSS styles.

6. tinymce.util

tinymce.util handles various aspects of the browser, with classes including:

• Delay, which handles timers and timeouts
• ImageUploader, which uploads images to a backend server.

Working with TinyMCE APIs

As you’ve seen, there are a number of API methods in TinyMCE. Here are some suggestions for using them effectively:

tinymce API

The tinymce.Editor contains the core editor logic for tinymce API. This allows you to get content from the editor or set it in the editor, and hide or show the editor, among other features.

This CodePen provides a place to test these API methods. The getContent() method gets the content from the editor instance and cleans it up before returning it.

For example:

tinymce.activeEditor.getContent();

//or

tinymce.activeEditor.getContent({ format: "html" });

The above code returns the HTML contents of the active editor. If you want it to return plain text instead of HTML, you should include the format.

tinymce.activeEditor.getContent({ format: "text" });

You can get content from a specific editor if needed because each editor has a unique ID. Just get the content from a particular id instead of an activeEditor.

tinymce.get("blogeditor").getContent();

You can apply formats as well.

hide() reveals any textarea/div that the editor is designed to replace while hiding the editor.

//This works with an active editor
tinymce.activeEditor.hide();

//This works with a specific editor
tinymce.get("blogeditor").hide();

setContent() cleans the content from the editor, and then sets given content inside the editor instance.

For example:

tinymce.activeEditor.setContent("Here is a fixed text");

The code above sets the HTML contents of the active editor. You could also set contents using a specified format.

tinymce.activeEditor.setContent("<p>Here is a fixed text</p>", {
  format: "text",
});

You can set contents for a specific editor by using the id.

data = "Here is a fixed text";
tinymce.get("blogeditor").setContent(data);

Again, you can also apply formats.

show() displays the editor while hiding any textareas or divs that the editor should replace.

//This works with an active editor
tinymce.activeEditor.show();

//This works with a specific editor
tinymce.get("blogeditor").show();

tinymce.Env

The tinymce.Env class holds numerous environment variables, such as browser versions. You wouldn’t normally want to detect specific browser versions, but if feature detection is impossible, you might not have a choice. Use this with caution. For example, this would be useful if you needed to attach an event or condition to a specific browser or device.

Here are some classes that all return a boolean value (true or false) if the user’s browser matches the browser the reader is targeting

1. browser.isChromium()
2. browser.isEdge()
3. browser.isFirefox()
4. deviceType.isWebView()
5. deviceType.isiPhone()
6. os.isWindows()

You can make use of these methods to add features to your rich text editor depending on the browser.

if (tinymce.Env.browser.isChrome()) {
  console.log("This is a Chrome browser");
} else {
  console.log("This is not a Chrome browser");
}

tinymce.WindowManager

The tinymce.WindowManager is one of the core class of TinyMCE APIs, under the tinymce API – the class handles the creation of native windows and dialogs. It’s defined by tinymce.WindowManager and offers five methods that perform different functions. You’d mostly use the following two:

1. alert() is used to create an alert dialog.

function showAlert() {
  // The active editors window manager instance is used to display an alert box.
  tinymce.activeEditor.windowManager.alert("Here is an alert!");
}

2. confirm() is used to create a confirm dialog.

function showAlert() {
  tinymce.activeEditor.windowManager.confirm(
    "Is this an authenticated user?",
    function (s) {
      if (s) tinymce.activeEditor.windowManager.alert("Ok");
      else tinymce.activeEditor.windowManager.alert("Cancel");
    }
  );
}

tinymce.dom

The tinymce.dom class works with the DOM from within the editor. tinymce.dom.Selection handles text and control selection. One method for this is getContent(), which returns the selected contents using the chosen DOM serializer.

For example:

tinymce.activeEditor.selection.getContent();

The code returns the selected contents of the active editor in HTML format. You could also do this by using a specified format.

tinymce.activeEditor.selection.getContent({ format: "text" });

To get contents for a particular editor, use that editor’s id.

tinymce.get("blogeditor").selection.getContent();

Again, you can also apply formats. getEnd() returns the end element of a selection range.

//This works with an active editor
tinymce.activeEditor.selection.getEnd();
//This works with a specific editor
tinymce.get("blogeditor").selection.getEnd();

setContent() changes the current selection to the content supplied. If no selection is made, the contents will be added at the caret.

For example:

tinymce.activeEditor.selection.setContent("<p>Here is a fixed text</p>");

The code above replaces the current selection with the HTML content. You could also set contents by using a specified format.

tinymce.activeEditor.selection.setContent("<p>Here is a fixed text</p>", {
  format: "text",
});

To set contents for a particular editor, use that editor’s id.

data = "Here is a fixed text";
tinymce.get("blogeditor").selection.setContent(data);

Again, you can also apply formats. You can test these methods in CodePen.

TinyMCE’s APIs are part of an essential editing experience

TinyMCE offers multiple APIs that make producing web content easier, faster, and more intuitive for developers and creators alike. You should now have a better sense of how and when to use these APIs in order to optimize your workflow and improve your product.

TinyMCE is just one of the products available from TinyMCE, which offers a number of tools to help developers improve their site design and content, and to better manage media for their product or website. For more information and to see these tools in action, check out this list of demos.