summernote - 如何在 v0.8.1 版本中创建带有下拉列表的 Summernote 自定义按钮并为按钮添加属性

Question

我正在尝试在 Summer-note v0.8.1 中创建一个自定义按钮(带有下拉列表)。

我以前使用过一个运行良好的旧版本，但是在新版本中我不知道如何创建下拉列表按钮。

请帮助我向自定义按钮添加属性。

Answer 1

你看到了吗https://github.com/summernote/summernote/issues/1611 ?

我刚刚(使用 Angular)使用 v0.8.1 实现了一个带有 2 个按钮的下拉列表，但我必须为下拉列表中的这两个按钮编写自定义 HTML:

$scope.summernoteOptions = {
  buttons: {
    dropdownExample: function dropdownExample(context) {
      var pdfButton = ui.buttonGroup([
        ui.button({
          className: "dropdown-toggle",
          contents:
            '<span class="fa fa-file-pdf-o"></span> <span class="caret"></span>',
          tooltip: "Your tooltip",
          data: {
            toggle: "dropdown",
          },
        }),
        ui.dropdown({
          className: "drop-default summernote-list",
          contents:
            '<div class="btn-group">' +
            '<button type="button" class="btn btn-default btn-sm" title="PDF 1"><i class="fa fa-file-pdf-o"></i>PDF 1</button>' +
            '<button type="button" class="btn btn-default btn-sm" title="PDF 2"><i class="fa fa-file-pdf-o"></i>PDF 2</button></div>',
          callback: function ($dropdown) {
            $dropdown.find(".btn").click(function () {
              context.invoke("editor.insertText", "text");
            });
          },
        }),
      ]);

      return pdfButton.render(); // jquery object
    },
  },
};