Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 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: you can skip this part if you already have application generated.

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

// 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 aurelia_project/aurelia.json file 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": "aurelia-froala-editor",
  "path": "../node_modules/aurelia-froala-editor/dist/amd",
  "main": "index",
  "resources": [
    "froala-editor.js",
    "froala-editor.html"
  ],
  "deps": [
    "froala-editor"
  ]
}
  • 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
);

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 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 file include the Aurelia Froala Editor plugin:
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
  resolve: {
    extensions: ['.js'],
    modules:[srcDir,'../node_modules/froala-editor/js','node_modules'],
     alias: {
       "FroalaEditor": 'froala_editor.pkgd.min.js'
     }
  },
plugins: [
  new AureliaPlugin(),
   new ProvidePlugin({
      FroalaEditor: 'froala_editor.pkgd.min.js',
      'Promise': 'bluebird',
      Popper: ['popper.js', 'default'] // Bootstrap 4 Dependency.
    }),
  new ModuleDependenciesPlugin({
    "aurelia-froala-editor": [ './froala-editor' ],
    "parent-module": [ "child-module" ],
  }),
]

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 your src/main.js or src/main.ts file add:
// 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, just use the aurelia-froala custom element to instantiate an editor.

<froala-editor></froala-editor>

Options

All configuration options can be set 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.tsfile:

// 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>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1927852399" 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_1113082928" 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_1467685119" 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>