knockout JS

Knockout JS Froala WYSIWYG Editor



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>

How to use with require js

In order to use knockout-froala with require js, you require code snippet similar to following:

// Froala Editor plugins list. var feplugins = ['align', 'charcounter', 'codeview', 'colors', 'draggable', 'emoticons', 'entities', 'file', 'fontfamily', 'fontsize', 'fullscreen', 'imagemanager', 'image', 'inlinestyle', 'linebreaker', 'link', 'lists', 'paragraphformat', 'paragraphstyle', 'quote', 'save', 'table', 'url', 'video'] // Define paths. var paths = { 'app': '../app', 'jquery': '', 'froalaeditor': '../../../bowercomponents/froala-wysiwyg-editor/js/froalaeditor.min', 'knockout':'../../../bowercomponents/knockout/dist/knockout.debug', 'knockout-froala':'../../../src/knockout-froala' }; // Add Froala Editor plugins to path. for (var i = 0; i < feplugins.length; i++) { paths['fe' + feplugins[i]] = '../../../bowercomponents/froala-wysiwyg-editor/js/plugins/' + feplugins[i] + '.min'; } var shim = { 'froalaeditor': {deps: ['jquery']} }; for (var i = 0; i < feplugins.length; i++) { shim['fe' + feplugins[i]] = { deps: ['froalaeditor'] } } // Init RequireJS. requirejs.config({ 'baseUrl': 'js/lib', 'paths': paths, shim: shim });

// Load the main app module to start the app


Where: 1.fe_plugins denote list of froala plugins. 2.paths variable defines the path of all resources. 3.shim variable defines dependencies among js files. 4.knockout.debug.js is loaded first because it returns a object(ko) required for accessing knockout variables and methods. This variable is made global. 5.knockout-froala is loaded next because it defines the froala bindings required by main app. 6.Finally app.js is loaded which contains the logic of your app.

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