Summernote还支持自定义按钮.如果要创建自己的按钮，则可以简单地定义和使用选项.

Summernote also support custom button. If you want to create your own button, you can simply define and use with options.

使用$ .summernote.ui创建按钮对象.此按钮对象具有以下属性.

Create button object using $.summernote.ui. This button objects have below properties.

contents:要在按钮上显示的内容 工具提示:将鼠标悬停在工具提示文本上 click:单击鼠标时调用回调函数

contents: contents to be displayed on the button tooltip: tooltip text when mouse over click: callback function be called when mouse is clicked

插入文字欢迎"的示例.

Example for inserting text ‘Welcome’.

var welcomeBtn = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/> WELCOME',
    tooltip: 'welcome',
    click: function () {
      // invoke insertText method with 'welcome' on editor module.
      context.invoke('editor.insertText', 'welcome');
    }
  });

  return button.render();   // return button as jquery object 
}

现在您可以在工具栏选项上定义自定义按钮.

now you can define custom button on toolbar options.

$('.summernote').summernote({
  toolbar: [
    ['mybutton', ['welcome']]
  ],

  buttons: {
    welcome: welcomeBtn
  }
});

类似地，对于自定义下拉按钮，您可以执行以下操作:

Similarly for custom dropDown button you can do something like this:

var emojiBtn = function (context) {

    var ui = $.summernote.ui;

    var emojiList = ui.buttonGroup([
              ui.button({
                className: 'dropdown-toggle',
                contents: '<span class="fa fa-smile-o"></span> <span class="caret"></span>',
                tooltip: "Insert Greetings",
                data: {
                  toggle: 'dropdown'
                }
              }),
              ui.dropdown({
                className: 'dropdown-style',
                contents: "<ol><li>smile</li><li>sleepy</li><li>angry</li></ol>",
                callback: function ($dropdown) {
                    $dropdown.find('li').each(function () {
                      $(this).click(function() {
                        context.invoke("editor.insertText", $(this).html());
                      });
                    });
                }
              })
    ]).render();
}

如果要在下拉菜单中显示一些预填充列表，则可以执行以下操作.

if you want to display some prepopulated list into your dropdown then you can do something like this..

var emojiBtn = function (context) {

    var ui = $.summernote.ui;
    var list = $('#elements-list').val();

    var button = ui.buttonGroup([
              ui.button({
                className: 'dropdown-toggle',
                contents: '<span class="fa fa-smile-o"></span> <span class="caret"></span>',
                tooltip: "Insert Greetings",
                data: {
                  toggle: 'dropdown'
                }
              }),
              ui.dropdown({
                className: 'drop-default summernote-list',
                contents: "<ul>"+list+"</ul>",
                callback: function ($dropdown) {
                    $dropdown.find('li').each(function () {
                      $(this).click(function() {
                        context.invoke("editor.insertText", $(this).html());
                      });
                    });
                }
              })
    ]);

    return button.render();
}