Save Big on Froala.  20% Off Annual | 30% Off Perpetual Licenses
Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.2 is here – Learn More

Pricing
Get Started
Skip to content
Froala Documentation

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: Skip this part if you already generated the application.

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

Add aurelia-froala-editor

  1. Install the aurelia plugin

    npm install aurelia-froala-editor --save

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

  3. In your src/app.html include the CSS files and the 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>

  4. In aurelia_project/aurelia.json 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');


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

  6. 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"
  ]
}

  7. Create a task to copy Font Awesome fonts:

    au generate task copy-assets

  8. 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();
}

  9. 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
);

  10. Add Font Awesome paths to aurelia_project/aurelia.json:

    {
  "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

  1. Install the aurelia plugin

    npm install aurelia-froala-editor --save

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

  3. In your src/app.html include CSS files and the 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>

  4. In webpack.config.js 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

  1. Install the aurelia plugin

    npm install aurelia-froala-editor --save

  2. In src/main.js or src/main.ts 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'));

  3. 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>

  4. In package.json 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

  5. Install the aurelia plugin

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

  6. In src/main.js or src/main.ts 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');

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

  8. 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, use the aurelia-froala custom element to instantiate an editor.

<froala-editor></froala-editor>

Options

You can set all the configuration options 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.ts

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