Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.2 is here – Learn More

Skip to content
Froala Documentation

knockoutjs

Knockout JS Froala Editor

Install

Using Bower run:

bower install knockout-froala

Using npm run:

npm install knockout-froala

Usage

To enable Froala binding on a text area, you need to provide the following binding handlers:

froalaThe model observable behind the editor
froalaOptionsA plain object or an observable that will hold all the options to initalize the editor
froalaInstance[ optional ] if provided, froala instance will be stored in this observable once initialized ( should be observable )
var viewModel = {
  comments: ko.observable(),
  options: {
    // disable wrapping content with paragraphs
    // instead <div> will be used
    enter: FroalaEditor.ENTER_DIV,
  
    // we like gray!
    theme: 'gray',
    toolbarButtons: [ 'bold', 'italic', 'underline' ]
  }
}
  
ko.applyBindings( viewModel );

For a <textarea> use the following:

<textarea 
 data-bind="value: comments, froala: comments, froalaOptions: options">
</textarea>

For a <div> use the following:

<div data-bind="froala: comments, froalaOptions: options"></div>

Using knockout-froala with RequireJS

The following steps show how to use knockout-froala with RequireJS:

  1. Define a list of Froala Plugins.

    var fe_plugins = [
      'align', 
      'char_counter',
      'code_view', 
      'colors', 
      'draggable', 
      'emoticons',
      'entities', 
      'file', 
      'font_family', 
      'font_size', 
      'fullscreen',
      'image_manager', 
      'image',
      'inline_>',
      'line_breaker',
      'link', 
      'lists', 
      'paragraph_format', 
      'paragrap_>', 
      'quote',
      'save', 
      'table', 
      'url', 
      'video'
    ]
    
  2. Define the paths for all the resources.

    var paths = {
      'app': '../app',
      'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
      'knockout':'../../../bower_components/knockout/dist/knockout.debug',
      'knockout-froala':'../../../src/knockout-froala'
      };
      
    // Add Froala Editor plugins to path.
    for (var i = 0; i &lt; fe_plugins.length; i++) {
      paths['fe_' + fe_plugins[i]] = 
        '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';
    }
      
  3. In the shim variable define dependecies among js files.

    var shim = {};
    
    for (var i = 0; i &lt; fe_plugins.length; i++) {
      shim['fe' + fe_plugins[i]] = {
        deps: ['FroalaEditor']
      }
    }
  4. Init RequireJS.

    requirejs.config({
      'baseUrl': 'js/lib',
      'paths': paths,
      shim: shim
    });
  5. Load the main app module to start the app

    requirejs(["app"]);

The resulting code should look like this:

var fe_plugins = [
  'align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
  'entities', 'file', 'font_family', 'font_size', 'fullscreen',
  'image_manager', 'image', 'inline_>', 'line_breaker',
  'link', 'lists', 'paragraph_format', '>paragrap_>', 'quote',
  'save', 'table', 'url', 'video'
]

var paths = {
  'app': '../app',
  'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
  'knockout':'../../../bower_components/knockout/dist/knockout.debug',
  'knockout-froala':'../../../src/knockout-froala'
};

for (var i = 0; i &lt; fe_plugins.length; i++) {
  paths['fe_' + fe_plugins[i]] = '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';
}

var shim = {};

for (var i = 0; i &lt; fe_plugins.length; i++) {
  shim['fe' + fe_plugins[i]] = {
    deps: ['FroalaEditor']
  }
}

requirejs.config({
  'baseUrl': 'js/lib',
  'paths': paths,
  shim: shim
});

requirejs(["app"]);

app.js contains the logic of your app. The following example shows the code for app.js:

requirejs(["knockout"], function(ko) {
  window.ko=ko;
  
  requirejs(["FroalaEditor"], function(FroalaEditor) {
    window.FroalaEditor = FroalaEditor;
    
    requirejs(["knockout-froala"], function() {
  
      requirejs(["fe_image","fe_char_counter"], function() {
  
        (function() {
          var viewModel = {
            html: ko.observable( '' ),
            options: {
              enter: FroalaEditor.ENTER_DIV,
              theme: 'gray',
              charCounterMax:150
            }
          }
  
          ko.applyBindings( viewModel, document.getElementById( 'app') );
        })();
  
      })
      
    })
    
  })
})

A Requirejs demo app is included in the knockout-froala repository. You can refer to it for more details.

Do you think we can improve this article? Let us know.