Aurelia

Aurelia Froala WYSIWYG Editor

GitHub

Install


With Webpack

Run: bash npm install aurelia-froala-editor

In your main.js or main.ts file:

// Font Awesome.
import 'font-awesome/css/font-awesome.css';

// Editor files.
import "froala-editor/js/froala_editor.pkgd.min.js";
import "froala-editor/css/froala_editor.pkgd.min.css";

...

aurelia.use.plugin('aurelia-froala-editor');

With JSPM

Run: bash jspm install aurelia-froala-editor

In your main.js or main.ts file:

// Font Awesome.
import 'font-awesome/css/font-awesome.css!';

// Editor JS.
import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css!';

...

froala.default();
aurelia.use.plugin('aurelia-froala-editor');

Usage

In an Aurelia template, just use the aurelia-froala custom element to instantiate an editor.

<froala-editor></froala-editor>

Options

All configuration options can be set via the config attribute.

<froala-editor value.two-way="value"
    config.bind="{
        toolbarButtons: ['redo' , '|', 'fontFamily', '|', 'fontSize', '|', 'paragraphFormat', 'color', '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'],
        toolbarButtonsMD: ['redo' , '|', 'fontFamily', '|', 'fontSize', '|', 'paragraphFormat', 'color'],
        toolbarButtonsSM: ['redo' , '|', 'fontFamily', '|', 'fontSize', '|', 'paragraphFormat', 'color'],
        toolbarButtonsXS: ['redo' , '|', 'fontFamily', '|', 'fontSize', '|', 'paragraphFormat', 'color'],
        fontFamilySelection: true,
        fontSizeSelection: true
    }">
</froala-editor>

Events

All the event handlers are also available:

<froala-editor value.two-way="value"
    event-handlers.bind = "{
        'paste.afterCleanup': processPaste
    }>"
</froala-editor>