Skip to content

aurelia

Aurelia Froala WYSIWYG Editor

GitHub

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:
// Editor files.
import "froala-editor/js/froala_editor.pkgd.min";

...

// 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="font-awesome.css"></require>
<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": "font-awesome",
  "path": "../node_modules/font-awesome/css",
  "main": "font-awesome.css"
},
"jquery",
{
  "name": "froala-editor",
  "path": "../node_modules/froala-editor",
  "main": "js/froala_editor.min",
  "resources": [
    "./js/**/*.{js}",
    "./css/**/*.{css}"
  ]
},
{
  "name": "aurelia-froala-editor",
  "path": "../node_modules/aurelia-froala-editor/dist/amd",
  "main": "index",
  "resources": [
    "froala-editor.js",
    "froala-editor.html"
  ],
  "deps": [
    "jquery",
    "froala-editor",
    "font-awesome"
  ]
}
  • Create a task to copy Font Awesome fonts:
au generate task copy-assets
  • 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
);
  • Add Font Awesome paths to aurelia_project/aurelia.json file:
{
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors",
    "assets": [
      {
        "src": "./node_modules/font-awesome/fonts/**/*.*",
        "dest": "./fonts"
      }
    ]
  }
}

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');

plugins: [
  new AureliaPlugin(),
  new ModuleDependenciesPlugin({
    "aurelia-froala-editor": [ './froala-editor' ],
    "parent-module": [ "child-module" ],
  }),
]

Run application

npm run start

With Easy Webpack

To configure your project with Easy 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
git reset --hard 8997a6f87339a2702f77aeaab7ede5bffe94437f
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 package.json file include the Aurelia Froala Editor plugin:
"aurelia": {
  "build": {
    "resources": [
      "aurelia-froala-editor/froala-editor"
    ]
  }
}

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:
// Import jQuery
import * as $ from 'jquery';

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

...

// 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>

Do you think we can improve this article? Let us know.