Froala 文本编辑器插入和删除自定义 html 标签

Question

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

基本上这应该与下划线或粗体文本的工作方式相同。也就是说，您可以加粗整个单词，但是如果您 select 'ol' 并再次单击加粗，您最终会得到这样的结果： bold

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

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;
    }
});

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

Froala 文本编辑器插入和删除自定义 html 标签

Froala text editor insert and remove custom html tags

javascript

angularjs

froala