Integrating TinyMCE with AngularJS

First we need AngularJS. After that we need to download TinyMCE. Extract it and upload all the data to javascript folder.

<!DOCTYPE html>
<html>
<head>
	<title>TinyMCE</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<!-- TinyMCE -->
	<script src="js/tinymce/tinymce.min.js"></script>
	<script src="js/angular-tinymce.min.js"></script>
	<script src="js/tinymce.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
		<textarea value="{{News.News}}" ui-tinymce="tinymceOptions" ng-model="News.News"></textarea></div>
</body>
</html>

This is tinymce.js

var app = angular.module('myApp', ['ui.tinymce']);

app.controller('MainController', function($scope) {
	$scope.tinymceModel = '';

	$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',
		height : '250'
	};
});

Result:

tinymce

Source:
https://github.com/angular-ui/ui-tinymce

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s