Froala文本编辑器插入并删除自定义html标记

Question

我在AngularJS版本中使用Froala。我想要一个自定义按钮，在触发时在所选文本周围添加<close></close>个标签。我还希望已经包含在这些标签中的选定文本在再次触发按钮时删除标签。

基本上这应该与下划线或粗体文本的工作方式相同。即你可以加粗整个单词，但是如果你选择'ol'并再次点击粗体，你最终会得到这样的结果： b ol d < /强>

我创建了一个添加标签的自定义按钮，但我不知道如何删除它们，如下所示：

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

这应该有所帮助。阅读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;
    }
});

在实例化编辑器时不要忘记添加按钮。