aurelia-froala-editor
    Overview
    Discussions
    Alternatives
    Reviews
    Code
    Tutorials
    Playground
    Chat
    Versions

aurelia-froala-editor

Aurelia plugin for Froala WYSIWYG HTML rich text editor.

3.0.5  •  Updated 6 months ago  •  by froala  •  MIT License

Aurelia Froala WYSIWYG HTML Editor

npm npm npm

This package provides a custom element for the Froala WYSIWYG HTML Editor in Aurelia.

Table of contents

  1. Installation instructions
  2. Update editor instructions
  3. Integration
    1. With Aurelia CLI
    2. With Webpack
    3. With JSPM
  4. Usage
  5. License

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 git@github.com: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 git@github.com: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>

License

The aurelia-froala-editor project is under the Apache licence. However, to use the Froala WYSIWYG HTML Editor you should purchase a license for it. Froala has 3 different licenses for commercial use. For details please see License Agreement.

Popularity

Stars
22

Maintenance

Development

Last ver 6 months ago
Created 4 years ago
Last commit 5 months ago
8 days between commits

Technology

Node version: 10.11.0
48.6K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

17 contributors
Stefan Neculai
80 commits, 14 merges
Henning Krause
Maintainer, 32 commits, 1 merges, 1 PRs
Popescu
17 commits, 4 merges, 12 PRs
Georg Perhofer
14 commits
Diana Neculai
8 commits
Navneet Nagpal
1 commits, 5 merges
Works at Accolite Software India Pvt. Ltd

Tags

aurelia
plugin
froala
wysiwyg
html
rich
text
editor
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.