Spoiler text

by Froala_marketing

HTML

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    <!--Include Font awesome for the button icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"
        integrity="sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        
<div id="editor"></div>

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

CSS

.spoiler-text {
        filter: blur(4px); /* Adjust blur strength as needed */
        transition: filter 0.3s ease-in-out; /* Smooth transition */
        user-select: none; /* Prevents text selection */
      cursor: default;
}

.spoiler-text:hover,
.spoiler-text:focus {
  filter: blur(0); /* Removes blur on hover/focus */
}

JavaScript

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');
  }
});


  new FroalaEditor('#editor', {
    // Add the custom buttons in the toolbarButtons list, after the separator.
    toolbarButtons: [['undo', 'redo' , 'bold'], ['spoiler','html']]
  });