Spocke
2.5 KiB
2.5 KiB
layout, title, title_nav, description, keywords
| layout | title | title_nav | description | keywords |
|---|---|---|---|---|
| default | AngularJS Integration | AngularJS | This directive allows you to add a TinyMCE editor to your form elements. | integration integrate angular angularjs |
Integration 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" inside the new directory, this will setup 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-dev
3. Creating the demo.html file
This demo.html file has angular properties and a two calls to the controller.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="bower_components/tinymce-dist/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.