How to add custom html with class in Froala Editor
<p>Trying to figure out how to:</p>

<p>1). add a button to <a href="https://www.froala.com/wysiwyg-editor" rel="nofollow noreferrer">Froala editor</a> which would wrap a selection of text (current block) in an <code>&lt;h1&gt;</code>.
2). If current selected text (or immediate parent block) is an <code>&lt;h1&gt;</code>, the clicking the custom button would remove the <code>&lt;h1&gt;</code>.
3). If current selected text (or immediate parent block) is an <code>&lt;h1&gt;</code>, the tool icon in the toolbar will be highlighted.</p>

<p>..basically toggling, typical WYSIWYG editor behavior.</p>

<p>I'm attempting to do this using ES6 classes, not in the jQuery style sytax (if can be avoided). I'm using React, but same applies to all ES6 classes..</p>

<p><strong>Custom Button added to toolbar just fine:</strong></p>

<pre><code>export class RichEditor extends Component {
  /*code left out for brevity..*/

  // configEditor is called in constructor..
  configEditor() {

    let editorPlugins = [froala, image, table, link, list];
    editorPlugins.forEach(plugin =&gt; {
      plugin($);
    });

    let toolbarOptions = [
      'myButton',
      'h2',
      'bold'
    ];

    $.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'});
    $.FroalaEditor.RegisterCommand('myButton', {
      title: 'Header — TOC',
      icon: `&lt;i style="font-style: normal;"&gt;
        &lt;b&gt;H2&lt;/b&gt;
      &lt;/i&gt;`,
      undo: true,
      focus: true,
      showOnMobile: true,
      refreshAfterCallback: true,
      callback: function () {
        /*
          ******************
          WHAT TO PUT HERE??
          ******************
        */
      }
    });

    /*this.$editorNode set in constructor*/
    this.$editorNode
      .froalaEditor({
        toolbarButtons: toolbarOptions,
        toolbarButtonsMD: toolbarOptions
        imageUploadURL: '/upload_media',
      })
      .on('froalaEditor.contentChanged', (e, editor) =&gt; {         
         //handle change
      });
  }
  }

  render() {
    return (
      &lt;div&gt;
        &lt;textarea id="rich-editor" name="content"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>What to put in the above snippet callback (
WHAT TO PUT HERE)</p>

<p>In that section, I previously had tried..</p>

<pre><code>let txt = this.selection.text();
 if (txt === undefined) return;

 this.html.insert(
  `&lt;h2&gt;
    ${txt}
  &lt;/h2&gt;`
 );
</code></pre>

<p>This worked ok but icon in toolbar is not highlighted.
text w bold/underline applied..<br>
<img src="https://cloud.githubusercontent.com/assets/17860864/21031763/0d08a8e2-bd5a-11e6-944e-17faec75fd2d.png" alt="image">       </p>

<p>Also if there is nothing selected, H1 button inserts many <code>&lt;br&gt;</code> wrapped ` which are almost impossible to delete in the editor.<br>
<img src="https://cloud.githubusercontent.com/assets/17860864/21043392/836f927e-bdab-11e6-8e21-e06191d45224.png" alt="image"></p>

<p><strong>Second Attempt: Use jQuery</strong><br>
In the callback, I could do something like..
<code>
$(this.selection.element()).wrap('&lt;h2&gt;&lt;/h2&gt;')
</code>
using jQuery, but if at all possible would prefer to use the API of the froala wysiwyg editor..
And also this does not highlight the icon in the toolbar when this line of code is selected indicating that it is styled (like the others do)</p>

<p><strong>Third Attempt</strong>    </p>

<p>Using <code>this.paragraphFormat</code> in the callback..as is suggested in docs.
```
this.paragraphFormat.apply('H2')</p>

<p>```</p>

<p>But <code>paragraphFormat</code> is not available on <code>this</code>..</p>

<p><img src="https://cloud.githubusercontent.com/assets/17860864/21064724/4831626c-be11-11e6-8435-63ac57670c39.png" alt="image"></p>

<p>//no <code>paragraphFormat</code> method on <code>this</code>.</p>

<p><img src="https://cloud.githubusercontent.com/assets/17860864/21064730/579d5620-be11-11e6-9a86-d72a56bf6464.png" alt="image"></p>