angular-summernote demo

by samu_eyes

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/summernote/summernote/v0.6.0/dist/summernote.css">
<script src="https://cdn.rawgit.com/summernote/summernote/v0.6.0/dist/summernote.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="http://labs.sideeffect.kr/2014/angular-summernote/v0.3.1/dist/angular-summernote.min.js"></script>
<h1>angular-summernote</h1>
<p>angular directive for <a href="http://hackerwins.github.io/summernote/">Summernote</a></p>

<h2>summernote directive</h2>

<h4>use element</h4>
<summernote></summernote>

<h4>use attribute</h4>
<div summernote></div>

<h2>summernote options</h2>

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

<h4>focus</h4>
<summernote focus></summernote>

<div ng-controller="AirmodeCtrl">
<h4>airmode</h4>
<summernote airMode ng-model="text">
</summernote>
</div>

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

<div ng-controller="CodeCtrl">
<h4>code : HTML string in summernote</h4>
<summernote ng-model="text"></summernote>

<br>
<textarea type="text" ng-model="text" style="width:100%;"></textarea></br>
text : {{text}}
</div>

<div ng-controller="CallbacksCtrl">
<h4>use callbacks</h4>
<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)"
            on-image-upload="imageUpload(files, editor)"
            editable="editable"></summernote>
</div>

CSS

body {
  margin: 10px 20px 50px 20px;
}

JavaScript

angular.module('summernoteDemo', ['summernote'])
    .controller('OptCtrl', function($scope) {
      $scope.options = {
        height: 150,
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['height', ['height']]
        ]
      };
    })
    .controller('AirmodeCtrl', function($scope) {
      $scope.text = "<h3>This is an Air-mode editable area.</h3>";
    })
    .controller('CodeCtrl', function($scope) {
      $scope.text = "Hello World";
    })
    .controller('CallbacksCtrl', function($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() { console.log('Called event paste'); };
      $scope.change = function(contents) {
        console.log('contents are changed:', contents, $scope.editable);
      };
      $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) {
        console.log('image upload:', files, editor);
        console.log('image upload\'s editable:', $scope.editable);
      };
    });