<!doctype html>
<html>
<head>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-ressource.min.js"></script>
<script type="text/javascript" src="tinymce.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="plunker">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
var myApp = angular.module('plunker', ['ngRoute','ui.tinymce','ui.bootstrap']).
config(['$routeProvider', function($routeProvider) {
console.log("init angular");
$routeProvider.when('/', {templateUrl: 'view.html', controller: 'View'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
myApp.controller('View', ['$scope', function ($scope) {
console.log("View Controller");
$scope.modal = {one:"hello"};
}])
/**
* Binds a TinyMCE widget to <textarea> elements.
*/
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['uiTinymceConfig', function(uiTinymceConfig) {
uiTinymceConfig = uiTinymceConfig || {};
var generatedIds = 0;
return {
require: '?ngModel',
link: function(scope, elm, attrs, ngModel) {
var expression, options, tinyInstance;
// generate an ID if not present
if (!attrs.id) {
attrs.$set('id', 'uiTinymce' + generatedIds++);
}
options = {
// Update model when calling setContent (such as from the source editor popup)
setup: function(ed) {
ed.on('init', function(args) {
ngModel.$render();
});
// Update model on button click
ed.on('ExecCommand', function(e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
// Update model on keypress
ed.on('KeyUp', function(e) {
console.log(ed.isDirty());
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
},
mode: 'exact',
elements: attrs.id
};
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
} else {
expression = {};
}
angular.extend(options, uiTinymceConfig, expression);
setTimeout(function() {
tinymce.init(options);
});
ngModel.$render = function() {
console.log("render")
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
}
};
}]);
<textarea data-ui-tinymce data-ng-model="modal.one"></textarea>
change in the input doesn't change the textarea<br>
<input ng-model="modal.one">