Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to configure TinyMCE in modal windows: FAQs and solutions series

Joe Robinson

April 25th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

It’s hard to hold someone’s attention these days, but at least for a web app, there’s a solution. By using a modal, you can instantly capture your app visitor’s attention. 

Modals are any elements that “float” on top of the page, and usually invite interaction between the viewer and the web page. They can be easily interpreted as an annoying pop-up, but that depends on the intention behind the modal. For instance, if you want your app visitor to avoid a pitfall in a task, then the modal may be a good (not bad) thing. In another instance, you may want your customer to enter some text. This is where rich text editors and modals come together. 

This article explains how to introduce and configure the TinyMCE rich text editor into a modal, and avoid any errors in the configuration. It also covers the topic of TinyMCE and Bootstrap Modals.

Using TinyMCE in a modal dialog

  1. Open an index.html file in your environment, and include the TinyMCE CDN link and init script to get started:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: '.mytextarea',
        height: "360",
      });
    </script>

If you do not already have one, you can sign up for a FREE API key, and try out our premium plugins for 14 days, free.

  1. Integrate TinyMCE into a form element:

<form action="">
  <h2>TinyMCE in a dialog</h2>

  <div>
    <p>You can have all different content in a dialog...</p>
  </div>

  <textarea class="mytextarea">Hello, I'm in a dialog now.</textarea>

  <div>
    <p>..including a rich text editor.</p>
  </div>

  <button value="cancel">Close</button>
</form>;
  1. Wrap that form in a dialog element:

<dialog>
  <form action="">
    <h2>TinyMCE in a dialog</h2>

    <div>
      <p>You can have all different content in a dialog...</p>
    </div>

    <textarea class="mytextarea">Hello, I'm in a dialog now.</textarea>

    <div>
      <p>..including a rich text editor.</p>
    </div>

    <button value="cancel">Close</button>
  </form>
</dialog>;
  1. Set the dialog element to have an empty “open” attribute

<dialog open="">
  1. Set the form method to “dialog”

 <form action="" method="dialog">
  1. Add in a Close button with the value set to “cancel”:

<div>
        <p>..including a rich text editor.</p>
</div>

    <button value="cancel">Close</button> 

  </form>
   
</dialog>

Here’s the complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TinyMCE in a modal dialog</title>
    <script src="https://cdn.tiny.cloud/1/Add-your-API-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: '.mytextarea',
        height: "360",
    });
    </script>
  </head>
</head>
<body>

<dialog open="">

  <form action="" method="dialog">

    <h2>TinyMCE in a dialog</h2>
      
      <div>
        <p>You can have all different content in a dialog...</p>
      </div>
      
      <textarea class="mytextarea">Hello, I'm in a dialog now.</textarea>
      
      <div>
        <p>..including a rich text editor.</p>
      </div>

    <button value="cancel">Close</button> 

  </form>
   
</dialog>

<h2>This page intentionally left blank.</h2>

</body>
</html>

Then save and run the index.html file in a browser. When the file opens, you should see TinyMCE appear in the dialog window that opens.

Bootstrap modals and TinyMCE

If you’re using Bootstrap modals, you can configure it to use TinyMCE inside the modal. The tiny.init script only requires a few extra lines of JavaScript. 

If you already have a TinyMCE instance running in your application page, you can add the .mytextarea class to a <textarea> tag inside the modal HTML.

  1. Include the bootstrap CDN scripts in the head of the HTML next to the TinyMCE CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  1. Add in a Bootstrap modal. This one is draw from a TinyMCE fiddle demonstrating TinyMCE running inside a modal:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
	    <div class="modal-header">
		    <h3 id="myModalLabel">Modal header</h3>
	    </div>
	  
     <!--TinyMCE goes here-->
     <div class="modal-body">
		   <textarea class="mytextarea"></textarea>
	   </div>
    
     <!--Modal Button-->
	   <div class="modal-footer">
		   <button class="btn btn-primary" data-bs-dismiss="modal" aria-hidden="true">Close</button>
	   </div>
	
    </div>
  </div>
</div>

Include the following JavaScript into your tiny.init script to prevent the Bootstrap dialog from blocking focus:

// Prevent Bootstrap dialog from blocking focusin
       document.addEventListener('focusin', (e) => {
         if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
         e.stopImmediatePropagation();
   }

When you save and reload your web page, you can see TinyMCE running inside your modal dialog.

Your modal dialog is now ready

With your modal upgraded to include TinyMCE, you can now provide  a better writing experience when you’re asking them to include some information (like an opt-in form).

The TinyMCE rich text editor fits neatly into the form and dialog element, and remember that to avoid any errors in the configuration, particularly with Bootstrap modals, check that you have configured the focusin event listener: 

// Prevent Bootstrap dialog from blocking focusin
       document.addEventListener('focusin', (e) => {
         if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
         e.stopImmediatePropagation();
   }

Configuring this JavaScript will prevent any dialog related errors. 

Once you’ve configured TinyMCE with your modal dialog, you can try out one of our premium plugins for 14 days by signing up for a FREE API key. You can also make further changes to your rich text editor, such as turning off the menubar for a streamlined dialog form.

TinyMCEConfigurationDevelopersDesign
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to migrate from Slate.js to TinyMCE

    by Ben Long in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing