Aurelia Froala WYSIWYG Editor

Installation instructions

Install aurelia-froala-editor from npm

Copy

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.

Copy

npm install aurelia-cli -g
  au new my-app
  cd my-app
  

Add aurelia-froala-editor

1. Install the aurelia plugin

   Copy

   npm install aurelia-froala-editor --save
     

2. In your src/main.js or src/main.ts file add:

   Copy

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

   Copy

   <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

   Copy

   // Editor files.
     import "froala-editor/js/froala_editor.pkgd.min";
     
     ...
     
     // Use the aurelia-froala-editor plugin.
     aurelia.use.plugin('aurelia-froala-editor');
     

5. Copy

   "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

   Copy

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

   Copy

   au generate task copy-assets
     

8. Open newly created aurelia_project/tasks/copy-assets.js file and make it look like this:

   Copy

   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:

   Copy

   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:

    Copy

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

Copy

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

   Copy

   npm install aurelia-froala-editor --save
     

2. In your src/main.js or src/main.ts file add:

   Copy

   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:

   Copy

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

   Copy

   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.

Copy

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

   Copy

   npm install aurelia-froala-editor --save
     

2. In src/main.js or src/main.ts add:

   Copy

   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:

   Copy

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

   Copy

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

   Copy

   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

   Copy

   jspm install aurelia-froala-editor
     jspm install npm:froala-editor -o "{format: 'global'}"
     

6. In src/main.js or src/main.ts add:

   Copy

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

   Copy

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

   Copy

   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.

Copy

<froala-editor></froala-editor>
  

Options

You can set all the configuration options via the config attribute.

Copy

<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

Copy

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

Copy

<froala-editor
      value.two-way="value"
      event-handlers.bind = "{
          'paste.afterCleanup': processPaste
      }"></froala-editor>