Summernote-angular custom button in toolbar

Question

I want to use summernote editor on my page but I need to add special functionality for that. I want to add one button to summernote toolbar. This button should be something like dropdown where it is possible to select some value and this value should be inserted to current cursor position.

Usage in my imagination:

Html:

<summernote some-values="values"></summernote>

Angular controller:

module.controller("ControllerName", ["$scope", ($scope) => {
   $scope.values = ["value-for-insert1", "value-for-insert2", "value-for-insert3"];
}]);

I can edit summernote source code to achieve that, of course. But I don't want to solve this problem with this way. Is there some different solution for my problem?

Thank you

Answer 1

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

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

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();
}