Knockout JS Froala Editor

Install

Using Bower run:

Copy

bower install knockout-froala
  

Using npm run:

Copy

npm install knockout-froala
  

Usage

To enable Froala binding on a text area, 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 )

Copy

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:

Copy

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

For a <div> use the following:

Copy

<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.

   Copy

    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.

   Copy

    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 < 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. Copy

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

4. Init RequireJS.

   Copy

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

5. Load the main app module to start the app

   Copy

     requirejs(["app"]);

The resulting code should look like this:

Copy

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 < 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 < 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:

Copy

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.