Angular.js bindings for Froala WYSIWYG HTML Rich Text Editor.


Angular Core Dependency: >=1.0

Module License: MIT

Added by: Sam Deering





Stars: 142

Watchers: 142

Forks: 46



Module Description


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


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


  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>


Setting Defaults: to set defaults for the editor pass a config object to angular.value with the key froalaConfig like this:

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:


function myCtrl($scope){
    $scope.myHtml = "<h1>Hello World</h1>"
    $scope.froalaOptions = {
        buttons : ["bold", "italic", "underline", "sep", "align", "insertOrderedList", "insertUnorderedList"]


<textarea froala="froalaOptions" ngModel="myHtml"></textarea>

View a list of all the options available in the docs


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:

function myCtrl($scope){
    $scope.myHtml = "";
    $scope.froalaOptions = {
        buttons : ["bold", "italic", "underline", "sep", "align", "insertOrderedList", "insertUnorderedList"]

//Use the methods like this

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

$scope.editorOnFocus = function(e, editor){
    //Do Something


<textarea froala="froalaOptions" ngModel="myHtml" froala-event-focus="editorOnFocus"></textarea>

###options app.js

$scope.froalaOptions = {
    inlineMode: false,
    placeholder: "Edit Me",
    events : {
        focus : function(e, editor) {/* ... */}

###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!


The angular-froala project is under MIT license.

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

Module stats last updated: 2018-01-19 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!