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>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src=""></script>
	<!-- TinyMCE -->
	<script src="js/tinymce/tinymce.min.js"></script>
	<script src="js/angular-tinymce.min.js"></script>
	<script src="js/tinymce.js"></script>
<body ng-app="myApp">
<div ng-controller="MainController">
		<textarea value="{{News.News}}" ui-tinymce="tinymceOptions" ng-model="News.News"></textarea></div>

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'





Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s