Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Use multiple TinyMCE instances in a single page

Contribute to this page

This section is about adding multiple editor instances to a single page. This is a common use case when using TinyMCE’s inline mode. Breaking content into sections (e.g., titles, paragraphs) allows users to edit them individually.

Multiple editor instances sharing the same configuration

The following example breaks the page into two separate editable areas. Each area shares a single editor configuration. Each editable div is provided the same class of myeditablediv. TinyMCE is loaded just for the content area the user clicks.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '.myeditablediv',
    inline: true,
    menubar: false
  });
  </script>
</head>

<body>
  <form method="post">
    <h1>Multiple editors on a page: Section 1</h1>
    <div class="myeditablediv" id="section001">Click here to edit the first section of content!</div>
  
    <h1>Multiple editors on a page: Section 2</h1>
    <div class="myeditablediv" id="section002">Click here to edit the second section of content!</div>
  </form>
</body>
</html>

Note: In the example above, the css selector is a class because the id must be unique.

Multiple editor instances, each with a unique configuration

The following example loads each editable area with a unique configuration of TinyMCE. This is useful when different content areas have different needs, such as providing simple configuration for editing titles and a complete configuration for editing body content. Define a tinymce.init object/method for each configuration.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
 
  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>

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

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.