Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

knockoutjs

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:

froalaThe model observable behind the editor
froalaOptionsA 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 <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.

     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.

     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 &lt; 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.

     var shim = {
      
    };
      for (var i = 0; i &lt; fe_plugins.length; i++) {
        shim['fe' + fe_plugins[i]] = {
          deps: ['FroalaEditor']
      
      }
      }
      
  4. Init RequireJS.

    requirejs.config({
        'baseUrl': 'js/lib',
        'paths': paths,
        shim: shim
      });
      
  5. Load the main app module to start the app

      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 &lt; 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 &lt; 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.

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1581255337" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_279928933" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1658758427" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>