Question

I’m working on a little thing that would require some bbcode, and I really need it to have spoiler tags. I read through the example on adding my own tags to the library, but I don’t really understand how it works. All I want the spoiler tag to do is have a toggle-able button which hides some text.

Answer 1

For bb-ruby it looks like you can send your own tag definitions when you call bbcode_to_html as the first argument… so:

"Your string with [spoiler]spoiler[/spoiler]".bbcode_to_html(my_spoiler)

with my_spoiler being:

my_spoiler = {
  'Spoiler' => [
    /\[spoiler\](.*?)\[\/spoiler\]/mi, # regex to match spoiler
    '<div class="spoiler"><a>Show Spoiler</a><p>\1</p></div>',   # what to output, change this if needed
    'Spoiler text',                    # description
    '[spoiler]this is a spoiler[/spoiler]', # sample
    :spoiler                           # actual tag used
  ]
}

You’ll need to change the output to what you need and also have javascript to show the spoiler so in jQuery:

$('.spoiler').each(function () {
  $(this).find('p').hide();
  $(this).find('a').click(function () {
    $(this).find('p').toggle();
  });
});

I noticed you said you tried bbcoder as well, since I’m the author I’ll post how to do that one too. For bbcoder you need to put something like this in your application initialization or before you start parsing the actual strings:

BBCoder.configure do
  tag :spoiler do
    <<-EOS
<div class="spoiler">
  <a>Show Spoiler</a>
  <p>#{content}</p>
</div>
    EOS
  end
end

After you configure BBCoder you are good to go and it will know about the spoiler tag from then on and parse it for you so you just have to do

"My [spoiler]spoiler string[/spoiler]".bbcode_to_html

I haven’t tested these solutions but they should work without much fuss.