knockout JS

Knockout JS Froala WYSIWYG Editor

GitHub

Install

using Bower

bower install knockout-froala

using npm

npm install knockout-froala

Usage

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>