Start trial
PricingContact Us
Log InStart For Free

How to configure TinyMCE show and hide APIs

February 14th, 2024

4 min read

The show and hide status brought on by the show hide buttons depicted with a minimalist editor

Written by

Joe Robinson

Category

How-to Use TinyMCE

You can always turn off a user interface component if you don’t need to see it. It’s better yet, though, to give your customers the option to show or hide interface components, with a show hide button on click function. But it shouldn't take days to implement. So, here’s a quick how-to on implementing a show hide button on TinyMCE.

You’ve likely come across useful web APIs that extend a component’s behavior. At Tiny, we work to ensure the TinyMCE rich text editor is flexible enough to cater for different use cases…and this how-to guide explains how to use TinyMCE’s APIs to build a show hide button for better user interface control.

There’s one major limit on the scope of this how-to guide. Despite testing out both the inline and iframe options for the TinyMCE rich text editor, this post only focuses on the APIs working with the classic iframe mode. We did this to keep the scope sensible, and because seeing what the show and hide API does in action is clearer in iframe mode.

Why use a show hide button?

Generally, show hide buttons help eliminate distractions, conceal information that's not needed, and allow your customers to control the amount of information that appears in the user interface. This also contributes to accessibility by reducing distractions.

For example, the show hide button in MS Word conceals formatting marks like spaces, tabs, and paragraph markers.

Build a show hide button for TinyMCE

To build a show hide button for TinyMCE, make use of the TinyMCE show API and the hide API methods. These two API methods work when TinyMCE is configured in both the classic iframe and inline modes.

Show and hide divs and the textarea

The show and hide methods can conceal the TinyMCE editor when it’s initialized on a textarea element, and when it’s working with inline mode using HTML elements like a div. Although, when making use of the APIs to build show hide buttons, what the API does in action is more clear in iframe mode. Here’s what happens when the API works:

  1. 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 a new element for the TinyMCE to work on
  2. TinyMCE then hides and conceals the target element
  3. Running the hide API conceals the editor, and shows the original, target element again.

Creating the show hide button

1. Set up a Tiny script in your html file

For this demo, you can follow along with these steps.There are a few prerequisites:

💡NOTE: Adding your API key prevents TinyMCE from changing into read-only mode when you’re accessing TinyMCE through Tiny Cloud CDN.

Start by creating a new index.html file in your development environment, and copy the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Focus and Hide</title>
    <script src="https://cdn.tiny.cloud/1/add-your-api-key-!/tinymce/6-dev/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>
<style>
p {
     margin: 2rem;
}
button {
     margin: 0.2rem;
}
</style>
</head>
 

2. Add API buttons to your web page

Copy the following show and hide button onclick button and HTML content into the demo file body elements. The ‘lorem ipsum’ lines in paragraph tags expand the size of the editor on the demo page, which makes the show and hide button behavior easier to see:

<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>
 

3. Test out the show hide button

Save the changes, and then open the demo HTML file in your browser. You can make use of localhost HTTP server for the tests:

The show and hide API working with a button in a demo web app

Change the show hide button to a scroll event

While you can set up the show hide button to work with the onclick event, you can also add a different event listener. For example, the following content when added to the TinyMCE init script, triggers the show and hide behavior when the demo scrolls:

✏️NOTE: The scroll event continues to trigger the event listener in this demo until you click on the cancel button. You’ll need to increase the number of items on the page as well – so that the demo can scroll. Additional ‘lorem ipsum’ paragraphs can increase the page length. Kudos to Millie Macdonald for developing the following JavaScript:

...
        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>

You can now scroll down, and see show hide working on a completely different event:

The TinyMCE show and hide API working with a scroll event

What’s next?

You can find out more about APIs for the TinyMCE editor, and our Premium plugins.  

Ask our sales team if you’re looking for something to upgrade your web app. Your API key comes with a 14-day free trial of TinyMCE’s Premium plugins.

DevelopersEngineering
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 TinyMCEOct 3rd, 2024

    Add Author Information to Revision History in TinyMCE - Complete Guide Part 3

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.