angular-froala

Angular.js bindings for Froala WYSIWYG HTML Rich Text Editor.
3 people use it
Author: 7966884?v=2 froala
Submitted by: 637004?v=3 stefanneculai

angular-froala

angular-froala provides AngularJS bindings to the froala WYSIWYG editor.

Installation

  1. Clone this repo or download the zip.
  2. Run bower install or Download the editor from http://froala.com/wysiwyg-editor/ and jQuery
  3. Load Froala WYSIWYG editor, jQuery and the angular-froala files into your project
    • src/angular-froala.js
    • src/froala-sanitize.js

Usage

  1. Add the froala dependency to your Angular project. example:
    • angular.module('myApp', ['froala'])
  2. Create a textarea with the froala directive in your view and give it a model, where myHtml is a variable on $scope.
    • <textarea froala ng-model="myHtml"><textarea>

Options

Setting Defaults: to set defaults for the editor pass a config object to angular.value with the key froalaConfig like this: javascript angular.module('myApp', ['froala']). value('froalaConfig', { inlineMode: false, placeholder: 'Enter Text Here' });

From the Controller: to set options from the controller, create an options object on scope and simply pass it to the froala directive. example:

app.js

view.html

View a list of all the options available in the docs

Methods

To use the methods available, access the editor instance from your froalaOptions object $scope.options.froala(method) and use it as described in the method docs. example:

Events

Events can be used one of two ways as an attribute on the directive, or passed in with the options.

Attribute

app.js

view.html

options

app.js

Displaying Html

Using ng-bind-html will render your html on the page but the default angular-sanitize.js will strip out all style tags. Remedy this by including froala-sanitize.js instead. example: <div ng-bind-html="myHtml"></div>

Congrats all is done!

License

The angular-froala project is under MIT license.

Froala Editor has 4 different licenses for commercial use. For details please see License Agreement.

comments powered by Disqus
This page was last updated over 2 years ago.