README.md

angular-summernote - AngularJS directive to Summernote

---

angular-summernote is just a directive to bind summmernote's all features. You can use summernote with angular way.

Change logs

See here.

Demo

See at JSFiddle or run example in projects(need to run bower install before run)

Installation

angular-summernote requires all include files of Summernote. see Summernote's installation.

Project files are also available through your favourite package manager:

• Bower: bower install angular-summernote

How to use

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the ui.bootstrap AngularJS module:

When you've inclued all js and css files you need to inject a into your angular application:

angular.module('myApp', ['summernote']);

summernote directive

You can use summernote directive where you want to use summernote editor. And when the scope is destroyed the directive will be destroyed.

As element:

<summernote></summernote>

As attribute:

<div summernote></div>

It will be initialized automatically.

options

summernote's options can be specified as attributes.

height

<summernote height="300"></summernote>

focus

<summernote focus></summernote>

airmode

<summernote airMode></summernote>

options object

You can specify all options using ngModel in config attribute.

<summernote config="options"></summernote>

function DemoController($scope) {
  $scope.options = {
    height: 300,
    focus: true,
    airMode: true,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']]
    ]
  };
}

NOTE: height and focus attributes have high priority than options object.

NOTE: custom toolbar can be set by options object.

ngModel

summernote's code, that is HTML string in summernote. If you specify ngModel it will be 2-ways binding to HTML string in summernote. Otherwise angular-summernote simply ignore it.

<summernote ng-model="text"></summernote>

function DemoController($scope) {
  $scope.text = "Hello World";
}

event listeners

event listeners can be registered as attribute as you want.

function DemoController($scope) {
  $scope.init = function() { console.log('Summernote is launched'); }
  $scope.enter = function() { console.log('Enter/Return key pressed'); }
  $scope.focus = function(e) { console.log('Editable area is focused'); }
  $scope.blur = function(e) { console.log('Editable area loses focus'); }
  $scope.paste = function(e) { console.log('Called event paste'); }
  $scope.change = function(contents, editable$) { console.log('contents are changed:', contents); };
  $scope.keyup = function(e) { console.log('Key is released:', e.keyCode); }
  $scope.keydown = function(e) { console.log('Key is pressed:', e.keyCode); }
  $scope.imageUpload = function(files, editor, welEditable) {
    console.log('image upload:', files, editor, welEditable);
  }
}

<summernote on-init="init()" on-enter="enter()" on-focus="focus(evt)"
            on-blur="blur(evt)" on-paste="paste()" on-keyup="keyup(evt)"
            on-keydown="keydown(evt)" on-change="change(contents, $editable)"
            on-image-upload="imageUpload(files, editor, welEditable);">
</summernote>

i18n Support

if you use i18n, you have to include language files. See summernote's document for more details. And then you can specify language like:

<summernote lang="ko-KR"></summernote>