AngularJS integration
This directive allows you to add a TinyMCE editor to your form elements.
Contribute to this pageIntegration with AngularJS is currently done through angular-ui-tinymce a third party module. This how-to shows you how to setup a project using AngularJS and TinyMCE.
1. Setting up the project directory
First, we create a directory for the project called “tinymce-angular-demo”. After that, we run “bower init”in the new directory, this will set up a new empty bower project.
$ mkdir tinymce-angular-demo
$ cd tinymce-angular-demo
$ bower init
2. Installation of angular, ui-tinymce and tinymce
We now install the angular-ui-tinymce package this will automatically install angular and TinyMCE.
$ bower install angular-ui-tinymce --save
3. Creating the demo.html file
This demo.html file has angular properties and two calls to the controller.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="bower_components/tinymce/tinymce.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
<form method="post" ng-controller="TinyMceController">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
<button ng-click="getContent()">Get content</button>
<button ng-click="setContent()">Set content</button>
</form>
</body>
4. Creating the app.js file
The app.js file shows you how to work with the model that automatically updates TinyMCE.
var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('TinyMceController', function($scope) {
$scope.tinymceModel = 'Initial content';
$scope.getContent = function() {
console.log('Editor content:', $scope.tinymceModel);
};
$scope.setContent = function() {
$scope.tinymceModel = 'Time: ' + (new Date());
};
$scope.tinymceOptions = {
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
};
});
5. Testing the application
You can now test the application by running the demo.html page in your favorite browser.
A note about integrations
Important: This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.