how to create Summernote Custom Button with dropdown list in version v0.8.1 and add attributes to button

Question

I am trying to create a custom button(with a drop down list) in summer-note v0.8.1.

I was previously using an older version which worked well, however in the new version I cannot figure out how to create a dropdownlist button.

Please help me out in adding attributes to the custom button.

Answer 1

Did you see https://github.com/summernote/summernote/issues/1611?

I just implemented (using Angular) a dropdown with 2 buttons with v0.8.1, but I have to write custom HTML for those 2 buttons that are inside the dropdown:

$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
    },
  },
};