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
-
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.
-
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>;
-
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>;
-
Set the dialog element to have an empty “open” attribute
<dialog open="">-
Set the form method to “dialog”
<form action="" method="dialog">-
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.
-
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>-
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.
