Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor
npm install knockout-froala
>Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor ( Version 2 )
using Bower
``bash`
bower install knockout-froala
using npm
`bash`
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 editorfroalaOptions
* : a plain object or an observable that will hold all the options to initalize the editorfroalaInstance
* : [ 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
`js
var viewModel = {
comments: ko.observable(),
options: {
// disable wrapping content with paragraphs
// instead
will be used
enter: 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
`
or a
html
`
#### You can also pass events Inside
-
`
'focus': function () {
// this is the editor instance.
console.log(this);
}
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 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.
License
The
Froala Editor has 3 different licenses for commercial use.
For details please see License Agreement.