Froala text editor insert and remove custom html tags

Question

I am using Froala in an AngularJS build. I would like a custom button that adds <close></close> tags around the selected text when triggered. I would also like selected text that has already been wrapped in those tags to have the tags removed when the button is triggered again.

Essentially this should work the same way as underlining or bolding text. i.e you can bold the entire word, but if you select the 'ol' and click bold again, you end up with something like this: bold

I have created a custom button that adds the tags, but I don't know how to remove them, like so:

callback: function () {

  var selectedText = this.html.getSelected(),
    firstTag = '<close>',
    lastTag = '</close>';

  // replace selected text with wrapped text
  this.html.insert(firstTag + selectedText + lastTag, true)

}

Answer 1

This should help. Read about creating custom buttons in froala editor.

$.FroalaEditor.DefineIcon("highlight", { NAME: "exclamation" });
$.FroalaEditor.RegisterCommand("highlight",
{
    title: "Highlight",
    focus: false,
    refreshAfterCallback: false,
    callback: function () {
        //this.html.insert("<span class=\"highlight\">" + this.html.getSelected() + "</span>");
        debugger;
    }
});

Do not forget to add the button when instantiating the editor.