Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

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.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1910620980" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1353629781" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1504585208" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>