使用 类 创建链接的自定义 Summernote 按钮

Question

所以我对如何制作自定义 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
}

我已经查看了大量不同的帖子，但除了示例之外，我还没有进一步了解我要完成的任务。在此先感谢所有花时间提供帮助的人。

Answer 1

当我进行更多研究时，我偶然发现了 Summernote's 'Awesome Summernote' GitHub page which led me to a plugin, summernote-addclass。虽然这不一定能回答问题的核心（即在没有插件的情况下实现同样的事情），但它确实完成了我需要做的事情。也许这会在将来帮助其他人。享受吧！

Answer 2

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

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

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

我使用回调方法将自定义 class 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");
        }
      }
    });
  });

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