1

Topic: Spoiler plugin

Hi,

I am using tinymce on a mybb forum, this editor is used only for staff members to allow having a more powerful editor than the regular bbcode editor offered by mybb.
However, there is a missing feature in tinymce for our need which is a spoiler plugin. In mybb it is possible to use the following plugin for the editor :
http://community.mybb.com/mods.php?action=view&pid=143
Here you can see the function used by this plugin :

function spoiler_run($message) {
    $pattern = array("#\[spoiler=(?:"|\"|')?([a-zA-Z0-9!:\#\.\? \',\-\(\)]*?)[\"']?(?:"|\"|')?\](.*?)\[\/spoiler\](\r\n?|\n?)#si", "#\[spoiler\](.*?)\[\/spoiler\](\r\n?|\n?)#si",);

    $replace = array("<div class=\"spoiler_wrap\"><div class=\"spoiler_header\"><a href=\"javascript:void(0);\" onclick=\"javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';this.innerHTML='&lt;img title=&quot;[+]&quot; alt=&quot;[+]&quot; src=&quot;/images/collapse_collapsed.png&quot; class=&quot;expandspoiler&quot; /&gt;$1';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';this.innerHTML='&lt;img title=&quot;[-]&quot; alt=&quot;[-]&quot; src=&quot;/images/collapse.png&quot; class=&quot;expandspoiler&quot; /&gt;$1';}\"><img title=\"[+]\" alt=\"[+]\" src=\"/images/collapse_collapsed.png\" class=\"expandspoiler\" />$1</a></div><div class=\"spoiler_body\" style=\"display: none;\">$2</div></div>", "<div class=\"spoiler_wrap\"><div class=\"spoiler_header\"><a href=\"javascript:void(0);\" onclick=\"javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';this.innerHTML='&lt;img title=&quot;[+]&quot; alt=&quot;[+]&quot; src=&quot;/images/collapse_collapsed.png&quot; class=&quot;expandspoiler&quot; /&gt;Spoiler';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';this.innerHTML='&lt;img title=&quot;[-]&quot; alt=&quot;[-]&quot; src=&quot;/images/collapse.png&quot; class=&quot;expandspoiler&quot; /&gt;Spoiler';}\"><img title=\"[+]\" alt=\"[+]\" src=\"/images/collapse_collapsed.png\" class=\"expandspoiler\" />Spoiler</a></div><div class=\"spoiler_body\" style=\"display: none;\">$1</div></div>");

    while(preg_match($pattern[0], $message) or preg_match($pattern[1], $message)) {
        $message = preg_replace($pattern, $replace, $message);
    }
    $find = array(
        "#<div class=\"spoiler_body\">(\r\n?|\n?)#",
        "#(\r\n?|\n?)</div>#"
    );

    $replace = array(
        "<div class=\"spoiler_body\">",
        "</div>"
    );
    $message = preg_replace($find, $replace, $message);
    return $message;
}

Up to now, I have tried using the following plugin for tinymce as a beginning : https://github.com/romanvm/TinyMCE4.spoiler

Using the spoiler button I can have the spoiler showing in the textarea of the tinymce eitor. However, when I am submitting the message, I am loosing some parts of the code. After reading some posts in the forum, it seems to be related to valid_elements ( https://www.tinymce.com/docs/configure/content-filtering/#valid_elements ). But I can't find how to set this up well.

The adapted plugin looks like this now :

/*
Spoiler plugin for TinyMCE 4 editor

It adds special markup that in combination with a site-side JS script
can create spoiler effect (hidden text that is shown on clik) on a web-page.
An example of a site-side script: https://jsfiddle.net/romanvm/7w9shc27/

(c) 2016, Roman Miroshnychenko <romanvm@yandex.ua>
License: LGPL <http://www.gnu.org/licenses/lgpl-3.0.en.html>
*/
tinymce.PluginManager.add('spoiler', function(editor, url)
{

  editor.contentCSS.push(url + '/css/spoiler.css');
  var spoilerCaption = editor.getParam('spoiler_caption', 'Spoiler!');

  function addSpoiler()
  {
    var selection = editor.selection;
    var node = selection.getNode();
    if (node) {
      editor.undoManager.transact(function() {
      var content = selection.getContent();
      if (!content) {
        content = 'Spoiler text.';
      }          
      selection.setContent('<div class="spoiler_wrap"><div class="spoiler_header"><a href="javascript:void(0);" onclick="javascript:if(parentNode.parentNode.getElementsByTagName(\'div\')[1].style.display==\'block\'){parentNode.parentNode.getElementsByTagName(\'div\')[1].style.display=\'none\';this.innerHTML=\'&lt;img title=&quot;[+]&quot; alt=&quot;[+]&quot; src=&quot;/fofov2/images/collapse_collapsed.gif&quot; class=&quot;expandspoiler&quot; /&gt;' + spoilerCaption + '\';}else {parentNode.parentNode.getElementsByTagName(\'div\')[1].style.display=\'block\';this.innerHTML=\'&lt;img title=&quot;[-]&quot; alt=&quot;[-]&quot; src=&quot;/fofov2/images/collapse.gif&quot; class=&quot;expandspoiler&quot; /&gt;' + spoilerCaption + '\';}"><img title="[+]" alt="[+]" src="/fofov2/images/collapse_collapsed.gif" class="expandspoiler" />' + spoilerCaption + '</a></div><div class="spoiler_body" style="display: none;">'
      + content + '</div></div>');
      });
      editor.nodeChanged();
    }
  }

  function removeSpoiler()
  {
    console.log(editor.contentCSS);
    var selection = editor.selection;
    var node = selection.getNode();
    if (node && node.className == 'spoiler_wrap')
    {
      editor.undoManager.transact(function()
      {
        var newPara = document.createElement('p');
        newPara.innerHTML = node.getElementsByClassName('spoiler_body')[0].innerHTML;
        node.parentNode.replaceChild(newPara, node);
      });
      editor.nodeChanged();
    }
  }

  editor.addButton('spoiler-add',
  {
    tooltip: 'Add spoiler',
    image: url + '/img/eye-blocked.png',
    onclick: addSpoiler
  });
  editor.addMenuItem('spoiler-add',
  {
    text: 'Add spoiler',
    context: 'format',
    onclick: addSpoiler
  });
  editor.addButton('spoiler-remove',
  {
    tooltip: 'Remove spoiler',
    image: url + '/img/eye-plus.png',
    onclick: removeSpoiler
  });
  editor.addMenuItem('spoiler-remove',
  {
    text: 'Remove spoiler',
    context: 'format',
    onclick: removeSpoiler
  });
});

Any help regarding this would be appreciated.

2

Re: Spoiler plugin

Cool, need to try.

3

Re: Spoiler plugin

Under Mybb and with the spoiler plugin added to mybb, using the following plugin in tinymce allow to use the bbcode.

tinymce.PluginManager.add('plutest', function(editor, url) {
  // Add a button that opens a window
  editor.addButton('plutest', {
    image: url + '/img/s.png',
    icon: false,
    onclick: function() {
      // Open window
      editor.windowManager.open({
        title: 'Int├ęgrer un spoiler',
        body: [
          {type: 'textbox', name: 'title', label: 'Title'}
        ],
        onsubmit: function(e) {
          // Insert content when the window form is submitted
          editor.insertContent('\[spoiler=' + e.data.title + '\]Mettre le corps du spoiler ici\[\/spoiler\]');
        }
      });
    }
  });

  // Adds a menu item to the tools menu
  editor.addMenuItem('plutest', {
    text: 'Spoiler',
    context: 'tools',
    onclick: function() {
      // Open window with a specific url
      editor.windowManager.open({
        title: 'TinyMCE site',
        url: 'http://www.tinymce.com',
        width: 800,
        height: 600,
        buttons: [{
          text: 'Close',
          onclick: 'close'
        }]
      });
    }
  });
});

However, there is no style applied in the editor.