Knockout JS Froala Editor

Install

Using Bower run:

bower install knockout-froala

Using npm run:

npm install knockout-froala

Usage

To enable Froala binding on a text area, you need to provide the following binding handlers:

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:

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

For a <div> use the following:

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

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:

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.