Skip to content

Angular 9+ plugin for Froala Editor

License

Notifications You must be signed in to change notification settings

boatzako/ngx-froala

Repository files navigation

ngx-froala

dependencies Status devDependencies Status

Angular 9+ bindings for Froala WYSIWYG Editor. See Demo

Getting Started

You can install ngx-froala by using npm.

npm install ngx-froala froala-editor --save

Add Froala editor to angular app

Open angular.json file

  • insert a new entry into the styles array
"styles": [
  "node_modules/froala-editor/css/froala_editor.pkgd.css",
  "..."
],
  • insert a new entry into the scripts array
"scripts": [
  "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
  "..."
],

Usage

Import ngx-froala module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgxFroalaModule } from 'ngx-froala'; // <-- add

@NgModule({
  imports: [
    BrowserModule, 
    NgxFroalaModule  // <-- add
  ],
  declarations: [ 
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Then in HTML

<div froalaEditor [options]="options" [(ngModel)]="text"></div>

Froala editor directive

Input

[options]

  • type: FroalaOptions
  • require: false
  • description: option for froala editor. see document

Output

[oncreated]

  • return: Froala instance
  • description: trigger when created the froala editor

Froala view

<ngx-froala-view [text]="text"></ngx-froala-view>

Input

[text]

  • type: string
  • require: true

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details