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

Posted 2023-03-22

【中文标题】自定义 Summernote 按钮以创建与类的链接

【英文标题】：Custom Summernote Button to create links with classes

【发布时间】：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

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

【参考方案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");
        
      
    );
  );

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