AnguarJS UI TinyMCE

Fixed version of the TinyMCE directive which reacts to 'change' event.

by Paul Homal

HTML

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-tinymce/master/src/tinymce.js"></script>
<div ng-app="myApp">
    <h1>Fixed ui.tinymce</h1>
    <p>Fixed version of angular ui tinymce which does update ng-model when link is updated, because it does listen 'change' event.</p>
    <br />
    
    <div ng-controller="myCtrl">
      <form name="form" action="#">
        <textarea ng-model="myMCEContent" ui-tinymce ng-maxlength="180" name="body"></textarea>
        <span ng-show="form.body.$error.maxlength" class="error">
    Reached limit!</span>
        <br />
        <br />
        <h3>Current ng-model content as HTML</h3>
        <div ng-bind-html="myMCEContent"></div>
        
        <br />
        <div ng-repeat="event in events">{{event.t}} {{event.ev}}<span ng-if="$last" style="color: red;">&lq;- last</span></div>
        <br /><br /> <br />
        <h3>Current ng-model content as text</h3>
        <div ng-bind="myMCEContent"></div>
      </form>
    </div>
</div>

JavaScript

angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}])
.constant('uiTinymceConfig', {plugins: 'link image textcolor', toolbar: 'undo redo | link image | forecolor backcolor', height: 300, forced_root_block: ''})
.controller('myCtrl', ['$scope', function($scope) {
    $scope.myMCEContent = '<p>Here is some content to edit, also an <a href="http://example.com">example link</a></p><br /><p>...and one image...</p><img src="http://placekitten.com/350/300">';
    $scope.events = [];
}]);