Adding a button to the WordPress TinyMCE editor menu

Yesterday I added spoiler support to the blog, using this article

The spoilers came out nice, they look like this:

I'm a spoiler

This article was written back when the site ran on `WordPress`, but now it runs on [Jekyll](https://jekyllrb.com/). If you're curious how I did the spoiler here, email me.

Only it’s inconvenient typing this out every time:

<spoiler name="I'm a spoiler"></spoiler>

Started poking around WordPress to find how to add a button for this magic tag to the TinyMCE editor toolbar. Didn’t find anything in Google or Yandex search results, maybe I phrased the question badly. So far I only managed to add it to the text (not visual) editor toolbar.

To do that, edit wp-includes/js/quicktags.min.js and insert these lines right at the end:

edButtons[140]=new a.TagButton("Spoiler","Spoiler","<spoiler\ name=\"\">","</spoiler>","t")

The very end is the }(); characters. The number 140 sets the button’s position in the toolbar. In my case I bumped the last button (close tags) up to 150 and gave the spoiler button id 140.

Here’s what I ended up with: