knockout-froala

knockout-froala

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

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: editorOptions"></textarea>

or a <div>

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

License

The knockout-froala project is under MIT license.

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