January Savings:  20% Off On All Plans + 3 Months of Platinum Support
Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 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 git@github.com: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 git@github.com: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 git@github.com: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.

Sign up

Sign up

Download the code by signing up for our newsletter

Sign up

Download the code by signing up for our newsletter

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. - Froala as described in the Privacy Statement. Froala, Inc. - Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.
Froala WYSIWYG Editor advertisement with a large blue circle covering a corner of the ad and three bullet points.