https://github.com/froala/aurelia-froala-editor
Aurelia plugin for Froala WYSIWYG HTML Rich Text Editor.
https://github.com/froala/aurelia-froala-editor
Last synced: 4 months ago
JSON representation
Aurelia plugin for Froala WYSIWYG HTML Rich Text Editor.
- Host: GitHub
- URL: https://github.com/froala/aurelia-froala-editor
- Owner: froala
- Created: 2016-06-06T08:17:56.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2026-01-15T10:51:03.000Z (5 months ago)
- Last Synced: 2026-01-15T15:51:46.932Z (5 months ago)
- Language: JavaScript
- Homepage: https://froala.com/wysiwyg-editor
- Size: 376 KB
- Stars: 28
- Watchers: 7
- Forks: 22
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aurelia Froala WYSIWYG HTML Editor
[](https://www.npmjs.com/package/aurelia-froala-editor)
[](https://www.npmjs.com/package/aurelia-froala-editor)
[](https://www.npmjs.com/package/aurelia-froala-editor)
>This package provides a custom element for the [Froala WYSIWYG HTML Editor](https://www.froala.com/wysiwyg-editor) in [Aurelia](http://aurelia.io/).
## Table of contents
1. [Installation instructions](#installation-instructions)
2. [Update editor instructions](#update-editor-instructions)
3. [Integration](#integration)
1. [With Aurelia CLI](#with-aurelia-cli)
2. [With Webpack](#with-webpack)
3. [With JSPM](#with-jspm)
4. [Usage](#usage)
5. [License](#license)
#### Note
>To use third-party plugins (i.e font-awesome,spell-checker,embedly and advanced image-edit) please use Aurelia with Webpack.
## Installation instructions
Install `aurelia-froala-editor` from `npm`
```bash
npm install aurelia-froala-editor --save
```
## Update editor instructions
```bash
npm update froala-editor
```
## Integration
### With Aurelia CLI
#### Installing aurelia-cli
*Note*: you can skip this part if you already have application generated.
```bash
npm install aurelia-cli -g
au new my-app
cd my-app
```
#### Add aurelia-froala-editor
- Install the aurelia plugin
```bash
npm install aurelia-froala-editor --save
```
- In your `src/main.js` or `src/main.ts` file add:
```javascript
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
- In your `src/app.html` include CSS files and Froala Editor component inside `` tag :
```html
```
- If you are using bundler then in `aurelia_project/aurelia.json` file set the builder loader plugins stub to `false`
```json
"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`
```javascript
{
"name": "aurelia-froala-editor",
"path": "../node_modules/aurelia-froala-editor/dist/amd",
"main": "index",
"resources": [
"froala-editor.js",
"froala-editor.html"
],
"deps": [
"froala-editor"
]
}
```
#### Run aurelia-cli
```bash
au run --watch
```
### With Webpack
To configure your project with Webpack, follow the resources from Aurelia Docs:
https://aurelia.io/docs/build-systems/webpack/.
```bash
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
```bash
npm install aurelia-froala-editor --save
```
- In your `src/main.js` or `src/main.ts` file add:
```javascript
import { PLATFORM } from "aurelia-pal";
// Editor files.
import "froala-editor/js/froala_editor.pkgd.min";
//Import third-party plugins
// import "./../node_modules/froala-editor/js/third_party/image_tui.min";
// import "./../node_modules/froala-editor/js/third_party/embedly.min";
// import "./../node_modules/froala-editor/js/third_party/font_awesome.min";
// import "./../node_modules/froala-editor/js/third_party/spell_checker.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 inside `` tag :
```html
```
- In `webpack.config.js` file include the Aurelia Froala Editor plugin:
```js
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
resolve: {
extensions: ['.js'],
modules: [srcDir, path.resolve("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
```bash
npm run start
```
### With JSPM
#### Installing aurelia-cli
To configure your project with JSPM, follow the resources from Aurelia Docs:
https://aurelia.io/docs/build-systems/jspm.
```bash
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
```bash
jspm install aurelia-froala-editor
jspm install npm:froala-editor -o "{format: 'global'}"
```
- In your `src/main.js` or `src/main.ts` file add:
```javascript
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
- In your `src/app.html` include CSS files and Froala Editor component inside `` tag :
```html
```
- In `build/bundles.js` add `aurelia-froala-editor` to `dist/aurelia` bundles:
```javascript
module.exports = {
"bundles": {
...
"dist/aurelia": {
"includes": [
...
"aurelia-froala-editor",
...
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
}
```
#### Run application
```bash
gulp watch
```
## Usage
#### Component
In an Aurelia template, just use the aurelia-froala custom element to instantiate an editor.
```html
```
#### Options
All [configuration options](https://www.froala.com/wysiwyg-editor/docs/options) can be set via the config attribute.
```html
```
A custom config can also be passed when the plugin is loaded in `src/main.js` or `src/main.ts`file:
```javascript
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor', config => {
config.options({
toolbarInline: true
})
});
```
#### Events
One can bind events to editor as given below.
>All the [event handlers](https://www.froala.com/wysiwyg-editor/docs/events) are also available.
```html
```
```js
events: {
'focus': function () {
console.log('Focus');
}
}
```
## 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](https://www.froala.com/wysiwyg-editor/pricing) for commercial use. For details please see [License Agreement](https://www.froala.com/wysiwyg-editor/terms).