Search code examples
javascriptjqueryangularjssummernote

How to insert a custom button in angular summernote


According documentation, you should do something like this :

<div ng-controller="OptCtrl">
  <summernote config="options"></summernote>
</div>

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

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

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

angular.module('summernoteDemo', ['summernote'])
    .controller('OptCtrl', function($scope) {
      $scope.options = {
        toolbar: [
          ['mybutton', ['hello']]
        ],
        buttons: {
          hello: HelloButton
        }
      };
    });

I tried this example. It displays the hello button well but I've got an error when I click on it :

Uncaught TypeError: Cannot read property 'invoke' of undefined

on this line context.invoke('editor.insertText', 'hello'); (context is undefined..)

Have you any idea about how to solve it ?

I'm using :

"summernote": "^0.7.3",
"angular-summernote": "^0.7.1"

Thanks


Solution

  • Problem solved by updating summernote and angular-summernote to the last release.