Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Aurelia

Knockout JS Froala WYSIWYG Editor

Install

using Bower

bower install knockout-froala

using npm

npm install knockout-froala

Usage

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>

Including All Plugins

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

How to use with require js

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

  1. // 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', '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 = {

    }; for (var i = 0; i < feplugins.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.

  1. Here is app.js code:

requirejs(["knockout"],function(ko) { window.ko=ko; requirejs(["FroalaEditor"],function(FroalaEditor) { window.FroalaEditor = FroalaEditor; requirejs(["knockout-froala"],function() {

requirejs(["feimage","fechar_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.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_677377158" 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_1150127149" 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_492276258" 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>