Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.2 is here – Learn More

Skip to content
Froala Documentation

aurelia

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