Using multiple TinyMCE editors on a single page

Question

Using multiple textareas results in TinyMCE only using the last configuration, rather than applying the correct config to each textarea.

I've tried several answers from Stack Overflow. None of them solved the problem. Many answers are from previous versions of TinyMCE, but do not specify what version the answers are for -- which makes obsolete answers seem relevant when they're not. Most troubling is that the official documentation from TinyMCE 4 is also apparently wrong.

This is the "official" way to specify more than one selector:

    tinymce.init({

      selector: "#textarea1",

    });

    tinymce.init({

      selector: "#textarea2",

    });

The actual outcome is that TinyMCE only uses the last configuration ("#textarea2").

Other solutions that you find on Stack Overflow and elsewhere do not solve the problem (using "exact" mode, specifying "textareas", etc.). The official documentation for tinyMCE v4 also uses the above method, though it is clearly wrong.

You can see this in the docs for yourself at the following link: https://www.tiny.cloud/docs/general-configuration-guide/multiple-editors/

Since using more than one editor on a page is basic functionality, I don't understand how there are so many possible "right" answers to the same question (note: this question is specifically about tinyMCE version 4), and apparently no definitive simple, correct answer. There's no reason for it to be a question to spend hours answering in several different possible ways without a clear solution. We're not exactly sending humans to Mars, here...

Thanks in advance for help on this issue.

Tyeth Tyeth · Accepted Answer · 2019-05-27T00:44:52

That link you posted is to version 5 of tinymce, but changing the version to 4 and looking at the multiple config example: https://www.tiny.cloud/docs-4x/general-configuration-guide/multiple-editors/

It runs fine for me in chrome on windows 10: https://jsbin.com/rehamun/edit?html,output

Close the trial warnings, and then click each line, the first gets undo etc, the second gets rich edit, two separate configs

Example repeated here to please automated answer moderation...

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
  </script>
  <script>
  tinymce.init({
    selector: '#myeditable-div',
    inline: true
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div">
      <p>This section of content can be edited. Click here to see how.</p>
    </div>
  </form>
</body>
</html>

Using multiple TinyMCE editors on a single page

2 Answers