<!doctype html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery UI -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- TinyMCE -->
<script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- AngularJS Sanitize -->
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<!-- AngularUI TinyMCE -->
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript" src="one.js"></script>
<script>
$(window).load(function() {
var this_scope = angular.element($('#container')).scope();
this_scope.from_js = {
"from_js": "<em>italic data in page javascript in head</em>"
};
this_scope.$apply();
});
</script>
</head>
<body ng-app="myApp">
<div id="container" ng-controller="TestCtrl">
<hr>
<div data-ng-model="value"
data-ui-tinymce="tinymceOptionsTextareaField"></div>
<hr>
</div>
</body>
</html>
/**
* 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() {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
}
};
}]);
var myApp = angular.module('myApp', ['ui.tinymce']);
function TestCtrl($scope, $http) {
$scope.tinymceOptionsTextareaField = {
apply_source_formatting : false,
forced_root_block: false,
force_p_newlines: false,
plugins: 'autolink link paste',
valid_elements: 'a[href|rel|target=_blank],br,p',
toolbar: false,
menubar: false,
statusbar: false,
paste_auto_cleanup_on_paste: true,
inline: true,
default_link_target: '_blank'
};
};
AngularJS TinyMCE initial textarea content
Two ways to load intiial content into a TinyMCE textarea when using AngularJS and bind the textarea to the model