如何使用版本v0.8.1中的下拉列表创建Summernote自定义按钮,并将属性添加到按钮

时间:2016-04-15 10:30:35

标签: summernote

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

我之前使用过的旧版本运行良好,但在新版本中,我无法弄清楚如何创建下拉列表按钮。

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

1 个答案:

答案 0 :(得分:4)

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

我刚刚使用带有v0.8.1的2个按钮实现了(使用Angular)下拉列表,但我必须为下拉列表中的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
   }
}

}