Angular Component for Froala Editor

This is Angular2 component for Froala Editor. This allows developers to easily integrate this powerful WYSIWYG editor into any applications. Most of the method calls, set up events listening, and options for the editors are still the same and follow the documentation of Froala Editor.
In order to use this component, you would need to include all the font-awesome css, jQuery and Froala js and css files in index.html Please feel free to make suggestions if you have ideas to improve it.
All development for this project sponsored by Thrinacia, The Next Generation CrowdFunding Infrastructure - https://www.thrinacia.com.

Demo

(Some links here to show how it works)

Quick Start

npm install ng2-froala-editor --save

Angular 4 Version

The most recent version of this module (1.0.17) uses Angular 4.0.0
If you have encountered problem, you may use the previous version (1.0.15), which was based on Angular 2.0.0

Example

In your NgModule:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {FroalaEditorModule} from 'ng2-froala-editor/ng2-froala-editor'; // <-- Import it in your NgModule
import {HttpModule} from '@angular/http';
import {MyComponent} from './My.component';
import {MyService} from './My.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    FroalaEditorModule  // <-- Include in your module
  ],
  declarations: [
    MyComponent
  ],
  bootstrap: [
    MyComponent
  ],
  providers: [
    MyService
  ]
})

export class AppModule { }

In your component:

import {Component, OnInit} from '@angular/core';
import {FroalaEditorComponent} from 'ng2-froala-editor/ng2-froala-editor';    <-- add this to get instance of FroalaEditorComponent

@Component({
  selector: 'my-component',
  template: `
    <froala [froalaOptions]="froalaOptions" [froalaData]="text" (model)="onFroalaModelChanged($event)" (editorInitialized)="onEditorInitialized()"></froala>
  `
})

export class MyComponent implements OnInit {

  text = '<div>Hey we are testing Froala Editor</div>';
  editor: any;

  froalaOptions: any = {
    height: 300
  };

  constructor() {

  }

  ngOnInit() {

  }

  onFroalaModelChanged(event: any) {
    setTimeout(() => {
      this.text = event;
    });
  }

  onEditorInitialized(event?: any) {
    this.editor = FroalaEditorComponent.getFroalaInstance();
    this.editor.on('froalaEditor.focus', (e, editor) => {
      console.log("editor is focused");
    });
  }
}

Docs

Inputs

• froalaData [string] If you have strings you would like the editor to have when it initializes, you can put it here
• froalaOptions [object] When Froala Editor initializes, you can pass an object to the editor to use different options. For the list of options, you can see it on Froala options

Outputs

• model [Event]
• editorInitialized [Event] This emits an event without any data. You can catch it if your component needs to know when the editor finishes initializing. One of the use cases is to get the Froala Editor instance

Static Method

• getFroalaInstance() Returns a Froala Editor instance, or the DOM the editor resides. From there you can call Froala's method and set up listener for events

Froala

Here is a snippet of how you can interact with the editor. Use onEditorInitialized() function above as example:

onEditorInitialized(event?: any) {
  // Save the editor instance
  this.editor = FroalaEditorComponent.getFroalaInstance();

  // Listen to Froala Editor's event
  this.editor.on('froalaEditor.focus', (e, editor) => {
    console.log("editor is focused");

    // Use Froala Editor's method
    this.editor.froalaEditor('codeView.toggle');
  });

}