GetTinyMCE by element: FAQ + Solutions series

Changing a web page element, or adjusting its style or content, represents an essential skill for client side development. Dynamic websites need to be able to change their appearance, so that they’re adapting to changing customers' needs. The process is called manipulating the Document Object Modifier (DOM). Changes to the DOM with JavaScript can rapidly shift how a web page appears.

One of the most common questions that our community has asked, and needs help with, is the process of selecting the TinyMCE editor by an element. Once selected, you can then make a change to the TinyMCE editor (that is, you’re manipulating the DOM, since the editor is part of the website’s DOM).

The good news is this can be done by adding an extra line to the TinyMCE init callback in your HTML file. It can also be done through an API call, for example, if you’re sending a request to a server (like an AJAX request), to get the editor content.

Two methods to get the TinyMCE editor by an element selector:

1. Target the active editor.
2. Get the element by the textarea tag id (so your text area tag will need an id if it does not have one already). 

How do I get TinyMCE editor instance by the element selector?

Two key steps are involved in getting the editor instance by element selector, and then to make changes:

1. Make sure you run the get() API to retrieve the element ID. 
2. Make sure the order of initialization and page elements loading in has been considered in your design.

First you need to clearly define what the id of the text editor element will be. A unique element ID is especially important if you have multiple rich text editors on your page.

TinyMCE’s get API needs that element id to work. Here are some examples:

• <textarea class=”tinyrte” id=”rte1”>
• <textarea class=”tinymce” id=”editor1”>
• <textarea class=”richtexteditor” id=”tinymce1”>

Then, run the get() API method to retrieve the editor instance by the id selector. For instance:

tinymce.get("tinymce1").setContent("...content here...");

The best place to put this call, however, isn’t a script file within your HTML page. You might set up something like this:

<form method="post" action="dump.php">
    <textarea class='richtexteditor' id='tinymce1'></textarea>
    <textarea class='richtexteditor' id='tinymce2'></textarea>
</form>
<script>
    tinymce.get('tinymce1').setContent("content here");
</script>

However, this is not best practice for production. 

In a production environment, there is no clear sign if the DOM has loaded, and the textarea element and TinyMCE id has initialized, loaded, and is ready to change and morph as you see fit. Place the required modification with the TinyMCE init callback with the setup option configured:

tinymce.init({
  selector: "textarea",
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste",
  ],
  toolbar:
    "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  setup: function (editor) {
    editor.on("init", function () {
      this.setContent(
        "The init function knows on which editor its called - this is for " +
          editor.id
      );
    });
  },
});

What if I don’t want to or can’t modify the init script?

If you don’t want to set up content in the Tiny init callback, carefully consider the lifecycle of an HTML page. The DOM elements load first, having its own specific step in the lifecycle. This means if you want to make changes to the editor, but you don’t know if the editor has loaded yet, you will need to target elements in the DOM.

Thankfully, you can make use of the TinyMCE API for DOM utilities.

Get TinyMCE editor content through the DOM

To test this out:

1. Open this fiddle, and then open the developer tools.
2. Change to the console tab, and change the selection
3. Run the following command in the console

tinyMCE
  .get("tinymce1")
  .dom.setHTML(
    tinyMCE.get("tinymce1").dom.select("p"),
    "change the inner html through the DOM"
  );

This should have the same effect as the Tiny get API – refresh the fiddle, compare the result to the command from earlier:

tinymce.get("tinymce1").setContent("...content here...");

The result is the same, but the difference between the two commands is that the dom.setHTML API call targets the TinyMCE editor through the page DOM. 

Don’t forget - the get() call in your TinyMCE init

All you have to remember is to get the TinyMCE editor by a selector, and dynamically change the content of the TinyMCE rich text editor, configure the get() API call with the setup option in your TinyMCE init. You can accomplish the same DOM manipulation with the TinyMCE dom.setHTML API call. 

Looking to try TinyMCE?

If you have not yet already signed up for a free API key so you can try out the Tiny and the premium plugins for thirty days following the moment when you register your account.