Repository files navigation

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

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 )
• froalaEvents: [ optional ] if provided, specified events will be registered to the froala instance

varviewModel={comments:ko.observable(),options:{// disable wrapping content with paragraphs// instead <br> will be usedenter:FroalaEditor.ENTER_DIV,// we like gray!theme:'gray',toolbarButtons:['bold','italic','underline']},events:{'initialized':function(e,editor){console.log('INITIALIZED');}}}ko.applyBindings(viewModel);

Using a<textarea>

<textareadata-bind="value: comments, froala: comments, froalaOptions: options, froalaEvents: events"></textarea>

or a<div>

<divdata-bind="froala: comments, froalaOptions: options, froalaEvents: events"></div>

Insideknockout-froala.js-

'focus': function () {   // this is the editor instance.   console.log(this); }

Use froala_editor.pkgd.legacy.min file to include all plugins

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

1. // Froala Editor plugins list.

   var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons','entities', 'file', 'font_family', 'font_size', 'fullscreen','image_manager', 'image', 'inline_style', 'line_breaker','link', 'lists', 'paragraph_format', 'paragraph_style', 'quote','save', 'table', 'url', 'video']// Define paths.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';}var shim = {

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

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

   // Load the main app module to start the app

   requirejs(["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.app.js contains the logic of your app.

2. Here is app.js code:

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 repository. You can refer it for more details.

Theknockout-froala project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

Froala Editor has3 different licenses for commercial use.For details please seeLicense Agreement.