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

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

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

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

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

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

Install the aurelia plugin

npm install aurelia-froala-editor --save

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

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

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

Aurelia Froala WYSIWYG Editor

Installation instructions

Update editor instructions

Integration

With Aurelia CLI

Installing aurelia-cli

Add aurelia-froala-editor

Run aurelia-cli

With Webpack

Add aurelia-froala-editor

Run application

With Easy Webpack

Add aurelia-froala-editor

Run application

With JSPM

Installing aurelia-cli

Add aurelia-froala-editor

Run application

Usage

Component

Options

Events

WYSIWYG EDITOR

FREE TOOLS

Resource

Get In Touch

Sign Up