自定义 Summernote 按钮以创建与类的链接答案

【问题标题】：Custom Summernote Button to create links with classes自定义 Summernote 按钮以创建与类的链接
【发布时间】：2018-08-17 03:19:16
【问题描述】：

所以我对如何制作自定义 SummerNote 按钮感到非常困惑，该按钮将允许我向已插入的 HTML 元素（即链接）添加类，甚至将选定的文本包装成如下内容：

<button class="btn btn-primary"> **selected text** </button>

从Summernote Deep Dive 开始，它展示了如何创建插入静态文本的自定义按钮，我了解如何实现它。但是，我似乎无法弄清楚如何使它对于选择的任何文本都是动态的。我尝试在 context.invoke 调用之后替换示例的 'text' 部分，但它不会将文本转换为 html，它只是打印它。

需要将链接创建为按钮。理想情况下，我希望访问 SummerNote 中已经内置的 Insert Link 对话框，以制作插入带有预定义类的链接的按钮，但我不确定这会有多复杂。

有人有什么建议吗？

var bsButton = function (context) {
var ui = $.summernote.ui;

// create button
var button = ui.button({
    contents: 'Btn',
    tooltip: 'Create Button',
    click: function () {
        // invoke insertText method with 'hello' on editor module.
        context.invoke('editor.insertText', '<button class="btn btn-primary"></button>');
    }
});

return button.render();   // return button as jquery object
}

我已经查看了大量不同的帖子，但我没有比我想要完成的示例更进一步。提前感谢所有花时间提供帮助的人。

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-5 summernote

【解决方案1】：

当我进行更多研究时，我偶然发现了Summernote's 'Awesome Summernote' GitHub page，它让我找到了一个插件summernote-addclass。虽然这不一定能回答问题的核心（即在没有插件的情况下实现同样的事情），但它完全符合我的需要。也许这将在未来对其他人有所帮助。尽情享受吧！

【讨论】：

【解决方案2】：

通过在summernote回调方法onInit中使用jQuery，我为自定义按钮添加了自定义类

这是我的自定义按钮代码：

var AddPage = function(context) {
    var ui = $.summernote.ui;
    var button = ui.button({
        contents: '<i class="fa fa-plus"/> Add Page',
        tooltip: "Set a New Page",
        class: "btn-primary",
        click: function() {
          addPage();
        }
    });
    return button.render();
};

我使用回调方法将自定义类 btn-primary 添加到按钮

$("#editor").summernote({
      airMode: false,
      dialogsInBody: false,
      toolbar: [["mybutton", ["customButton"]],
      buttons: {
        customButton: AddPage
      },
      callbacks: {
        onInit: function(e) {
          var o = e.toolbar[0];
          jQuery(o)
            .find("button:first")
            .addClass("btn-primary");
        }
      }
    });
  });

我认为这可能对任何人都有帮助，即使这不是很好的答案。

【讨论】：