Question

所以我完全混淆了如何制作一个自定义的SummerNote按钮，它允许我向已经插入的HTML元素（即链接）添加类，或者甚至将选定的文本包装在以下内容中：

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

从Summernote Deep Dive开始，它展示了如何创建插入静态文本的自定义按钮，并了解如何实现它。但是，我似乎无法弄清楚如何使其成为动态的选择任何文本。我在'text'调用后尝试替换示例中的context.invoke部分，但它没有将文本转换为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，这导致了我的插件，summernote-addclass。虽然这不一定能回答问题的核心（即在没有插件的情况下实现同样的事情），但它确实完成了我需要做的事情。也许这将有助于将来的其他人。享受！

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

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

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

2 个答案: