Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor
HTML JavaScript
Latest commit 60b0f72 Dec 9, 2016 @stefanneculai stefanneculai Update to V2.4.0.

Knockout Froala WYSIWYG HTML Editor

Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor ( Version 2 )


using Bower

bower install knockout-froala

using npm

npm install knockout-froala


to enable Froala binding on a textarea, you need to provide the following binding handlers

  • froala: the model observable behind the editor
  • froalaOptions: a 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 <br> will be used
    enter: $.FroalaEditor.ENTER_DIV,

    // we like gray!
    theme: 'gray',
    toolbarButtons: [ 'bold', 'italic', 'underline' ]

ko.applyBindings( viewModel );

Using a <textarea>

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

or a <div>

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


The knockout-froala project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

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