DEV Community

Cover image for Discord-Inspired Spoiler! Spice Up Your Web Editor Content With Hidden Text
IderaDevTools
IderaDevTools

Posted on • Originally published at froala.com

Discord-Inspired Spoiler! Spice Up Your Web Editor Content With Hidden Text

Modern editors aren’t just about bold and italic anymore — they’re about creating richer ways to format and present content. One modern feature you’ve likely seen in forums, chat apps, and blogs is spoiler text: content that’s hidden until a reader chooses to reveal it. Whether it’s for plot twists, quiz answers, or sensitive details, spoiler formatting can add both fun and utility to your writing.

In this post, we’ll explore how to implement spoiler text in the Froala WYSIWYG Editor. Instead of inserting raw HTML, we’ll take advantage of Froala’s built-in format.toggle API to wrap the current selection in a <span> element with a custom CSS class. This approach ensures that your spoiler style can be applied and removed just like bold or italic, keeping the editing experience clean and intuitive.

By the end, you’ll have a neat little toggle button in your Froala toolbar that lets users mark text as a spoiler — and some CSS that hides it until revealed.

Prerequisites

Before we start, make sure you have:

  • A working Froala Editor setup on your page.

  • Basic knowledge of JavaScript and CSS.

If you already have Froala running, you’re good to go.

Step 1: Define the Spoiler Style with CSS

First, let’s create a CSS class that hides text until hovered.

Instead of hiding text with a black background, we’ll use a blur effect. This keeps the text visible but unreadable until the user hovers or focuses on it.

.spoiler-text {
  filter: blur(4px);                /* Blurs the text (adjust blur strength as needed) */
  transition: filter 0.3s ease-in-out; /* Smoothly animates the blur change */
  user-select: none;                /* Prevents copying the hidden text */
  cursor: default;                  /* Keeps cursor neutral (not text-selectable) */
}

.spoiler-text:hover,
.spoiler-text:focus {
  filter: blur(0);                  /* Removes blur on hover or keyboard focus */
}
Enter fullscreen mode Exit fullscreen mode

How it works:

  • filter: blur(4px); → makes the text unreadable by blurring it.

  • transition: filter 0.3s ease-in-out; → ensures the blur fades smoothly when toggled.

  • user-select: none; → prevents people from selecting/copying blurred text.

  • cursor: default; → makes the cursor behave like normal text, not editable text.

  • :hover and :focus states → when the user hovers with a mouse or focuses with the keyboard (Tab), the blur is removed, revealing the text.

This gives a sleek “spoiler reveal” effect, and it also works for keyboard users (important for accessibility).

Step 2: Add a Custom Command to Froala

Next, we’ll teach Froala how to apply this class from a custom toolbar button.

FroalaEditor.ICON_DEFAULT_TEMPLATE = 'font_awesome';

// 1) Define an icon for the toolbar 
FroalaEditor.DefineIcon('spoiler', {NAME: 'eye-slash', template: 'font_awesome'});

// 2) Register a command that toggles a span.spoiler-text
FroalaEditor.RegisterCommand('spoiler', {
  title: 'Sensitive Content',
  icon: 'spoiler',
  focus: true,
  undo: true,
  refreshAfterCallback: true,

  // When clicked: toggle the span with class "my-span"
  callback: function () {
    // 'this' is the editor instance
    this.format.toggle('span', { class: 'spoiler-text' });
  },

  // Called to refresh button state (so it shows active when selection is inside span.my-span)
  refresh: function ($btn) {
    var isActive = this.format.is('span', { class: 'spoiler-text' });
    $btn.toggleClass('fr-active', isActive);
    $btn.attr('aria-pressed', isActive ? 'true' : 'false');
  }
});
Enter fullscreen mode Exit fullscreen mode

What happens here:

  • We create a button with an “eye-slash” icon.

  • The callback applies or removes the <span class="spoiler-text">.

  • The refresh method updates the button state so it lights up when spoiler is active.

Click-to-Reveal For Mobile Users

On the desktop, hover-to-reveal works nicely. But on mobile devices, there’s no hover — so it’s better to let users tap or click to reveal the text.

We can achieve this with a tiny bit of JavaScript:

/* Default blurred style */
.spoiler-text {
  filter: blur(4px);
  transition: filter 0.3s ease-in-out;
  user-select: none;
  cursor: pointer;  /* Cursor indicates clickability */
}

/* When revealed, blur is removed */
.spoiler-text.revealed {
  filter: blur(0);
}

// Toggle reveal on click
document.addEventListener('click', function (e) {
  if (e.target.classList.contains('spoiler-text')) {
    e.target.classList.toggle('revealed');
  }
});
Enter fullscreen mode Exit fullscreen mode

How it works:

  • By default, .spoiler-text is blurred.

  • When the user clicks (or taps) on it, JavaScript toggles the .revealed class.

  • .revealed removes the blur filter, showing the hidden content.

  • Clicking again can re-hide the text (or you can remove the toggle if you want a one-time reveal).

Example in Action:

<p>Answer: <span class="spoiler-text">42</span></p>

Now, on both desktop and mobile, readers can click or tap the blurred text to reveal it smoothly.

Step 3: Add the Button to Your Toolbar

Now tell Froala to include the button in the toolbar.

new FroalaEditor('#editor', {

  toolbarButtons: ['bold', 'italic', 'underline', 'spoiler', 'insertLink']

});
Enter fullscreen mode Exit fullscreen mode

When the editor loads, you’ll see the Spoiler button next to the others.

Step 4: Try It Out

Type some text into the editor, highlight a word or sentence, then click the Spoiler button.

  • The text should now look hidden with a blur effect.

  • Hover over it to reveal what’s inside.

  • Click Spoiler button again to remove the formatting.

Use Cases & Tips

Spoiler text can be used in many different contexts beyond just hiding movie endings. Here are some detailed scenarios where it can really improve the user experience:

1. Hiding Quiz or Homework Answers

If you’re creating an educational platform or blog, spoiler text is perfect for concealing answers until the student is ready.

  • The question or exercise is always visible.

  • The answer remains blurred until the learner hovers over it (or clicks, if you adapt the CSS).

  • This encourages active learning because users first attempt the question before revealing the solution.

Example:

<p>What is 12 × 8?</p>  
<span class="spoiler-text">96</span>
Enter fullscreen mode Exit fullscreen mode

2. Revealing Hints Step by Step

Sometimes you don’t want to give away the full answer immediately — just a nudge. Spoiler formatting lets you add “progressive disclosure” to your content.

  • The first hint might be lightly blurred.

  • A second hint might contain more detail.

  • Finally, the full answer can be revealed.

This is especially useful for puzzle games, coding tutorials, or escape room guides.

Example:

<p>Hint 1: <span class="spoiler-text">It’s a two-digit number.</span></p>  

<p>Hint 2: <span class="spoiler-text">It’s divisible by 12.</span></p>
Enter fullscreen mode Exit fullscreen mode

3. Concealing Story Spoilers in Blogs and Communities

Writers, bloggers, and fan communities often need to discuss books, movies, or TV shows without ruining the experience for readers who haven’t caught up.

  • Spoiler formatting allows discussions without fear of spoiling the fun.

  • Readers who want the details can reveal them on their own.

Example:

<p>The twist in the final episode is <span class="spoiler-text">the detective was the villain all along</span>.</p>
Enter fullscreen mode Exit fullscreen mode

4. Masking Sensitive Information

Spoiler text isn’t just for fun — it can also be a practical way to hide personal or sensitive details in demos or screenshots.

  • For example, showing an API key or password without exposing it directly.

  • You can blur the data but still reveal it when needed.

  • This makes tutorials safer without completely removing important context.

Example:

<p>Your API key is: <span class="spoiler-text">12345-ABCDE</span></p>
Enter fullscreen mode Exit fullscreen mode

5. Styling Variations for Fun

Spoiler text doesn’t have to look the same everywhere. You can:

  • Change the blur strength (subtle vs. strong).

  • Swap blur for pixelation (with a CSS trick).

  • Add hover animations (like fade-in or glow).

  • Require a click instead of hover by toggling a CSS class with JavaScript.

These variations let you adapt spoiler text to the tone of your platform — serious for sensitive info, playful for games or fan discussions.

FAQ: Creating Spoiler Text in Froala Editor

  1. Can I change the blur strength of the spoiler text?

    Yes. In the CSS, adjust the value in filter: blur(4px);. A higher number makes the text harder to read before revealing, while a smaller number makes it faintly visible.

  2. Can I make the spoiler reveal on click instead of hover?

    Absolutely. The article shows a “click-to-reveal” variation that toggles a .revealed class using JavaScript. This is especially useful for mobile devices where hover doesn’t exist.

  3. Will spoiler text be accessible for keyboard users?

    Yes. Since we also support :focus, users navigating with the keyboard (using Tab) can reveal the text. If you want click-only behavior, ensure the element can still be focused (e.g., add tabindex="0" to the spoiler spans).

  4. Can I style the spoiler differently, like fade-in or with a colored box?

    Definitely. The .spoiler-text class is just a starting point. You can add animations, background colors, or even icons. For example: .spoiler-text.revealed { animation: fadeIn 0.5s ease-in-out; }

  5. Can I prevent users from copying spoiler text before it’s revealed?

    Yes. We added user-select: none; in the CSS so blurred text can’t be highlighted or copied. You can remove this line if you want to allow copying even when blurred.

  6. Does this feature work in all browsers?

    The blur effect (filter: blur) works in all modern browsers (Chrome, Edge, Firefox, Safari). For older browsers, you may want to provide a fallback style, like hidden text with a black background.

  7. Can I use this same technique for other custom formats?

    Yes. The same format.toggle approach in Froala can be used for any custom inline style — like highlights, callouts, or even custom tags. Just swap out the class name and CSS.

Key Takeaways

  • Spoiler text adds interactivity — it’s great for hiding answers, hints, story spoilers, or sensitive info.

  • Use CSS for the hiding effect — blur, background color, or any creative styling you prefer.

  • Froala’s format.toggle API makes spoiler text behave like bold/italic (easy to apply and remove).

  • Click-to-reveal works best for mobile, while hover-to-reveal is fine for desktop.

  • Customizable styles let you adapt spoiler text to your platform’s tone — fun, educational, or professional.

Conclusion

With just a bit of CSS and Froala’s format.toggle API, you can give your editor a spoiler text feature that feels as natural as bold or italic. It’s flexible, easy to maintain, and a great example of extending Froala with your own custom formatting.

Now that you’ve seen how spoiler text works, try experimenting with other styles — like blurred text, tooltips, or even animated reveals. Froala makes it simple to extend the editor to fit your needs.

Try It Yourself 🎉

Want to see spoiler text in action? 👉 Open the live demo on JSFiddle and try adding spoiler formatting to your own text.

Select some text, click the Spoiler button, and watch it blur until you hover or tap to reveal!

✨ Pro tip: After testing, try modifying the CSS to change the blur strength or switch to a background-color reveal. You’ll see how flexible this technique is.

This article was originally published on the Froala blog.

Top comments (0)