jlowcs / ui-tinymce

AngularUI wrapper for TinyMCE

ui-tinymce directive

This directive allows you to add a TinyMCE editor to your form elements.

Requirements

• AngularJS
• TinyMCE 4

Testing

We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install
bower install
grunt

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test\test.config.js

Usage

We use bower for dependency management. Add

dependencies: {
"angular-ui-tinymce": "latest"
}

To your bower.json file. Then run

bower install

This will copy the ui-tinymce files into your components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="app/bower_components/tinymce/tinymce.js"></script>
<script type="text/javascript" src="app/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app/bower_components/angular-ui-tinymce/tinymce.js"></script>

Add the tinymce module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.tinymce'])

Apply the directive to your form elements:

<form method="post">
	<textarea ui-tinymce ng-model="tinymceModel"></textarea>
</form>

Options

All the TinyMCE options can be passed through the directive.

myAppModule.controller('MyController', function($scope) {
	$scope.tinymceOptions = {
		handle_event_callback: function (e) {
		// put logic here for keypress
		}
	};
});

<form method="post">
	<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</form>

placeholder

Additional option that will set a placeholder in the field when the field is empty.

The CSS class "ui-tinymce-placeholder" can then be used to style the placeholder.

Any change in the value will be reflected in the field.

Working with ng-model

The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.

If you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.

The ui-tinymce directive stores and expects the model value to be a standard javascript tinymce object.