Aurelia Froala WYSIWYG Editor

Installation instructions

Install aurelia-froala-editor from npm

npm install aurelia-froala-editor --save

Update editor instructions

npm update froala-editor

Integration

With Aurelia CLI

Installing aurelia-cli

Note: you can skip this part if you already have application generated.

npm install aurelia-cli -g
au new my-app
cd my-app

Add aurelia-froala-editor

• Install the aurelia plugin

npm install aurelia-froala-editor --save

• In your src/main.js or src/main.ts file add:

...

// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');

• In your src/app.html include CSS files and Froala Editor component:

<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
<require from="froala-editor/css/froala_style.min.css"></require>

<froala-editor></froala-editor>

• In aurelia_project/aurelia.json file set the builder loader plugins stub to false

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

...

// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');

• ​

"loader": {
  "type": "require",
  "configTarget": "vendor-bundle.js",
  "includeBundleMetadataInConfig": "auto",
  "plugins": [
    {
      "name": "text",
      "extensions": [
        ".html",
        ".css"
      ],
      "stub": false
    }
  ]
}

• In aurelia_project/aurelia.json add to vendor_bundle

{
  "name": "aurelia-froala-editor",
  "path": "../node_modules/aurelia-froala-editor/dist/amd",
  "main": "index",
  "resources": [
    "froala-editor.js",
    "froala-editor.html"
  ],
  "deps": [
    "froala-editor"
  ]
}

• Open newly created aurelia_project/tasks/copy-assets.js file and make it look like this:

import gulp from 'gulp';
import project from '../aurelia.json';

export default function copyAssets(done) {
  let assets = project.paths.assets;

  assets.forEach(item => {
    gulp.src(item.src)
        .pipe(gulp.dest(item.dest));
    });

  done();
}

• Open aurelia-project/tasks/build.js file and modify it to look like this:

import copyAssets from './copy-assets';

let build = gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    ...
    copyAssets // Add this.
  ),
  writeBundles
);

Run aurelia-cli

au run --watch

With Webpack

To configure your project with Webpack, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2 .

git clone [email protected]:aurelia/skeleton-navigation.git
cd skeleton-navigation/skeleton-esnext-webpack
npm install

Add aurelia-froala-editor

• Install the aurelia plugin

npm install aurelia-froala-editor --save

• In your src/main.js or src/main.ts file add:

import { PLATFORM } from "aurelia-pal";

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

...

// Use the aurelia-froala-editor plugin.
aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor'));

• In your src/app.html include CSS files and Froala Editor component:

<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
<require from="froala-editor/css/froala_style.min.css"></require>

<froala-editor></froala-editor>

• In webpack.config.js file include the Aurelia Froala Editor plugin:

const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
  resolve: {
    extensions: ['.js'],
    modules:[srcDir,'../node_modules/froala-editor/js','node_modules'],
     alias: {
       "FroalaEditor": 'froala_editor.pkgd.min.js'
     }
  },
plugins: [
  new AureliaPlugin(),
   new ProvidePlugin({
      FroalaEditor: 'froala_editor.pkgd.min.js',
      'Promise': 'bluebird',
      Popper: ['popper.js', 'default'] // Bootstrap 4 Dependency.
    }),
  new ModuleDependenciesPlugin({
    "aurelia-froala-editor": [ './froala-editor' ],
    "parent-module": [ "child-module" ],
  }),
]

Run application

npm run start

With JSPM

Installing aurelia-cli

To configure your project with JSPM, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-jspm/1 .

git clone [email protected]:aurelia/skeleton-navigation.git
cd skeleton-navigation/skeleton-esnext
npm install
jspm install -y

Add aurelia-froala-editor

• Install the aurelia plugin

jspm install aurelia-froala-editor
jspm install npm:froala-editor -o "{format: 'global'}"

• In your src/main.js or src/main.ts file add:

// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');

• In your src/app.html include CSS files and Froala Editor component:

<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
<require from="froala-editor/css/froala_style.min.css"></require>

<froala-editor></froala-editor>

• In build/bundles.js add aurelia-froala-editor to dist/aurelia bundles:

module.exports = {
  "bundles": {
    ...
    "dist/aurelia": {
      "includes": [
        ...
        "aurelia-froala-editor",
        ...
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    }
  }
}

Run application

gulp watch

Usage

Component

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>

A custom config can also be passed when the plugin is loaded in src/main.js or src/main.tsfile:

// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor', config => {
  config.options({
    toolbarInline: true
  })
});

Events

All the event handlers are also available:

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