src/knockout-froala.js
function init( element, value, bindings ) {
    var $el = $( element );
    var model = value();
    var allBindings = unwrap( bindings() );
    var options = ko.toJS( allBindings.froalaOptions );

    // initialize the editor
    $el.froalaEditor( options || {} );

    // provide froala editor instance for flexibility
    if( allBindings.froalaInstance && ko.isWriteableObservable( allBindings.froalaInstance ) ) {
      allBindings.froalaInstance( $el.data( 'froala.editor' ) );
    }

    // update underlying model whenever editor content changed
    var processUpdateEvent = function (e, editor) {
        if (ko.isWriteableObservable(model)) {
            var editorValue = editor.html.get();
            var current = model();
            if (current !== editorValue) {
                model(editorValue);
            }
        }
    }

    $el.on('froalaEditor.contentChanged', processUpdateEvent);
    $el.on('froalaEditor.paste.after', processUpdateEvent);

    // cleanup editor, when dom node is removed
    ko.utils.domNodeDisposal.addDisposeCallback( element, destroy( element ) );

    // do not handle child nodes
    return { controlsDescendantBindings: true };
  }
function init( element, value, bindings ) {
    var $el = $( element );
    var model = value();
    var allBindings = unwrap( bindings() );
    var options = ko.toJS( allBindings.froalaOptions );

    // initialize the editor
    $el.froalaEditor( options || {} );

    // provide froala editor instance for flexibility
    if( allBindings.froalaInstance && ko.isWriteableObservable( allBindings.froalaInstance ) ) {
      allBindings.froalaInstance( $el.data( 'froala.editor' ) );
    }

    // update underlying model whenever editor content changed
    var processUpdateEvent = function (e, editor) {
        if (ko.isWriteableObservable(model)) {
            var editorValue = editor.html.get();
            var current = model();
            if (current !== editorValue) {
                model(editorValue);
            }
        }
    }

    $el.on('froalaEditor.contentChanged', processUpdateEvent);
    $el.on('froalaEditor.paste.after', processUpdateEvent);

    // cleanup editor, when dom node is removed
    ko.utils.domNodeDisposal.addDisposeCallback( element, destroy( element ) );

    // do not handle child nodes
    return { controlsDescendantBindings: true };
  }
function init ( element , value , bindings ) { var $el = $ ( element ) ; var model = value ( ) ; var allBindings = unwrap ( bindings ( ) ) ; var options = ko . toJS ( allBindings . froalaOptions ) ; // initialize the editor $el . froalaEditor ( options || { } ) ; // provide froala editor instance for flexibility if ( allBindings . froalaInstance && ko . isWriteableObservable ( allBindings . froalaInstance ) ) { allBindings . froalaInstance ( $el . data ( 'froala.editor' ) ) ; } // update underlying model whenever editor content changed var processUpdateEvent = function ( e , editor ) { if ( ko . isWriteableObservable ( model ) ) { var editorValue = editor . html . get ( ) ; var current = model ( ) ; if ( current !== editorValue ) { model ( editorValue ) ; } } } $el . on ( 'froalaEditor.contentChanged' , processUpdateEvent ) ; $el . on ( 'froalaEditor.paste.after' , processUpdateEvent ) ; // cleanup editor, when dom node is removed ko . utils . domNodeDisposal . addDisposeCallback ( element , destroy ( element ) ) ; // do not handle child nodes return { controlsDescendantBindings : true } ; }
initiate froala editor, listen to its changes
and updates the underlying observable model

@param {element} element
@param {object} value
@param {object} bindings
@api public
initiate froala editor listen to its changes and updates the underlying observable model