angular-summernote demo

by samu_eyes

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/summernote/summernote/v0.8.1/dist/summernote.css">
<script src="https://cdn.rawgit.com/summernote/summernote/v0.8.1/dist/summernote.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/summernote/angular-summernote/0.8.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>
  <div class="example">
    <summernote blur="console.log(222)"></summernote>
  </div>

  <h4>use attribute</h4>
  <div class="example">
    <div summernote></div>
  </div>

  <div>
    <h4>initial text as inner html</h4>
    <div class="example">
      <summernote><span style="font-weight: bold;">This is initial text.</span></summernote>
    </div>
  </div>

<h2>summernote options</h2>

  <h4>height</h4>
  <div class="example">
    <summernote height="300"></summernote>
  </div>

  <h4>focus</h4>
  <div class="example">
    <summernote focus></summernote>
  </div>

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

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

<h2>advanced features</h2>

<div ng-controller="CodeCtrl">
  <h4>use ngModel to synchronize the value</h4>
  <div class="example">
    <summernote ng-model="text"></summernote>

    <br>
    <textarea type="text"...

CSS

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

h2, h4, h5, h6 {
  background-color: #eee;
  padding: 10px;
}

h4 {
  margin-left: 20px;
}

.example {
  margin-left: 40px;
}

JavaScript

angular.module('summernoteDemo', ['summernote'])
        .controller('OptCtrl', function($scope) {
          $scope.options = {
            height: 150,
            toolbar: [
              ['style', ['bold', 'italic', 'underline', 'clear']], 
            ]
          };
        })
        .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(e) {
            console.log('Called event paste: ' +  e.originalEvent.clipboardData.getData('text'));
          };
          $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) {
            console.log('image upload:', files);
            console.log('image upload\'s editor:', $scope.editor);
            console.log('image upload\'s editable:', $scope.editable);
          };
        });