bootstrap3-wysiwyg PoC

'use strict';

const app = angular
  .module('TextEditorApp', [])
  .directive('textEditor', function() {
    return {
        restrict : "A",
        require : 'ngModel',
        //replace : true,
        transclude : true,
        //template : '<div><textarea></textarea></div>',
        link : function(scope, element, attrs, ctrl) {
          
          //console.log($.fn.wysihtml5.defaultOptions);
          
          var $element = $(element);

          var textarea = $element.wysihtml5({
            
            parserRules : {
              tags: {
                strong : {},
                b :      {},
                i :      {},
                em :     {},
                br :     {}
              }
            },

            toolbar : {
              "font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
              "emphasis": true, //Italics, bold, etc. Default true
              "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
              "html": false, //Button which allows you to edit the generated HTML. Default false
              "link": false, //Button to insert a link. Default true
              "image": false, //Button to insert an image. Default true,
              "color": false, //Button to change color of font  
              "blockquote": false, //Blockquote  
              "size": 'none' //default: none, other options are xs, sm, lg
            }
            
          });
          
          var wysihtml5Editor = $element.data();
          
          //problem:
          console.log($(textarea).data('wysihtml5'));

          var editor = $(textarea).data('wysihtml5').editor;

          //view -> model
          editor.on('change', function() {
              if(editor.getValue())
              scope.$apply(function() {
                  ctrl.$setViewValue(editor.getValue());
              });
          });

          //model -> view
          ctrl.$render = function() {
            textarea.html(ctrl.$viewValue);
            editor.setValue(ctrl.$viewValue);
          };

          ctrl.$render();
        }
    };
});

app.controller('TextEditorController', function($scope) {
  
  const vm = this;
  
  angular.extend(this, {
    text : 'Test <div>It<div/>'
  });
  
});

<!DOCTYPE html>
<html ng-app="TextEditorApp">

  <head>
    <meta charset="utf-8" />
    <title>bootstrap3-wysiwyg PoC</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="https://rawgit.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/master/dist/bootstrap3-wysihtml5.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0/angular.js" data-semver="1.4.0"></script>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="https://rawgit.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/master/dist/bootstrap3-wysihtml5.all.js"></script>
  </head>

  <body class="container">
    
    <h1>bootstrap3-wysiwyg PoC</h1>
    
    <section ng-controller="TextEditorController as ctrl">
      
      <textarea data-text-editor ng-model="ctrl.text"></textarea>
      
      <br />
      
      <strong>Text Data : </strong> {{ctrl.text}}
      
    </section>
    
    <script src="app.js"></script>
    
  </body>

</html>

body {
  font-family: Helvetica, Arial, sans-serif;
}