Adding a tinyMCE plugin....

As described at

https://stackoverflow.com/questions/19761857/how-to-take-heading-h1-h2-h3-directly-on-toolbar-in-tinymce-4

I would like to add code like that included below so I can add headings buttons to the tinyMCE toolbar. I'm both a React and JavaScript novice so I can't figure out how to accomplish this. I get React errors when I try. Could someone give me some hints on how to proceed?

Many thanks!

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
  ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
   editor.addButton("style-" + name, {
       tooltip: "Toggle " + name,
         text: name.toUpperCase(),
         onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
         onPostRender: function() {
             var self = this, setup = function() {
                 editor.formatter.formatChanged(name, function(state) {
                     self.active(state);
                 });
             };
             editor.formatter ? setup() : editor.on('init', setup);
         }
     })
  });
});

instructure-react / react-tinymce

Adding a tinyMCE plugin.... #66