TinyMCE
MoxieManager
Drive
If you’re already designing web apps with TinyMCE, you’ve likely come across the range of APIs available – particularly the web-based APIs that integrate with, and change the rich text editor’s behavior. We want the Tiny rich text editor to be flexible enough for different use cases. A big part of that is giving you clear explanations and examples of APIs.
This how-to guide introduces and demonstrates how to use the show and hide APIs. There’s one major limit on the scope of this how-to guide – we did test out both the inline and iframe options for the TinyMCE rich text editor. For this post though, we’re only focusing on the APIs working with the classic iframe mode. We did this to keep the scope of this how-to sensible, and because what the show and hide API does in action is more clear in iframe mode.
Introducing the show and hide APIs
In an earlier release (back before TinyMCE 5.4), the show and hide API behavior did not work correctly. After a thorough investigation and unpacking of how the API worked, we introduced a fix for the issue, in TinyMCE 5.4.2.
Our team diagnosed the problem, and worked together on a shared Google Doc to test the API, adjust how it works, and considered what the documentation said about the API.
The show and hide API acts on TinyMCE’s UI. To explain this properly, you first need to know how TinyMCE works in iframe mode. When you specify a target element in the tinymce.init script in iframe mode (for example, by using a tag or class), TinyMCE creates new elements for the rich text editor UI based on the target element you specified. It then visually hides and conceals the target element.
The hide API allows you to visually hide the TinyMCE rich text editor, and show the target element again. And the show API brings back the rich text editor. Another API called focus() is designed to work with the show API. It can activate a rich text editor, and cause the blinking cursor to appear in the editable area, ready for you to write in.
Here’s the rich text editor before the hide API runs, and directly after. It visually transforms back into a text area element on the web page when the hide API runs:
To test the show and hide API, we configured a demo with the API responding to the event of a button press on a web page. We also included a scroll event with a confirmation message to demonstrate one possible use case — an app with a lot of visual information and a rich text editor that reminds the user that the editor is still open when it scrolls off screen.
Here’s how to create the demo app:
1. Set up a Tiny script in your html file
For this demo, start by adding in the tinymce.init script inside your head tags:
<span data-preserver-spaces="true"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Focus and Hide</title>
<script src="https://cdn.tiny.cloud/1/Put-your-tiny-API-key-HERE/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script></span>If you receive the message “The API you have entered is invalid. Please review your API key.” you can sign up for a key to try out TinyMCE premium plugins.
2. Add API buttons to your web page
We set up the demo web page to have a lot of filler text. This was to create a long web page so a scroll event would be possible (because you can’t scroll down through a small web page).
The APIs are assigned to buttons using the onclick event combined with the tinymce.activeEditor.hide() and .show() lines. Include as many ‘lorem ipsum’ lines in paragraph tags as needed to create a scrollable web page:
<span data-preserver-spaces="true"><body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<textarea name="content" id="editor"></textarea>
<button onclick="tinymce.activeEditor.hide()">Hide</button>
<button onclick="tinymce.activeEditor.show()">Show</button>
</body>
</html></span>With the API buttons in place, you can test out the process of turning the rich text editor on and off.
3. Include a scroll event listener for the APIs
The final part of the API to test its functions, beyond a button click, is the scroll event listener. This triggers the function when a scroll event is detected by the browser on the page.
We combined the scroll with a confirm message alert. This will ask the user if they want to continue to keep the text editor open, or close it down.
NOTE: The scroll event continues to trigger the event listener in this demo until you click on the cancel button.
The following JavaScript fits into the same script tag as the tinymce.init content:
...
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
document.addEventListener('scroll', function(e) {
// Check whether TinyMCE is in view and is visible
if (isScrolledIntoView(tinymce.activeEditor.getContainer()) && !tinymce.activeEditor.isHidden()) {
checkWithUser = confirm('You are scrolling away from the text editor, press OK to keep writing or cancel to close the text editor');
if (checkWithUser === true) {
tinymce.activeEditor.show();
} else {
tinymce.activeEditor.hide();
e.target.removeEventListener(e.type, arguments.callee);
return callback(e);
}
}
});
</script>When you test out the demo, you should now see the show and hide API when scrolling, and when pressing the ‘show’ and ‘hide’ buttons.
What’s next?
You can find out more about our APIs for the TinyMCE editor. Or find out more of our premium plugins.
If you’re enjoying our premium features, you can upgrade your account to use them after the 14 day trial period with one of our custom plans. Ask our sales team to find out more.
