Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

aurelia-froala-editor

Package Overview
Dependencies
Maintainers
2
Versions
116
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aurelia-froala-editor - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

_config.yml
src/froala-editor-config.js

9

build/babel-options.js
var path = require('path');
var paths = require('./paths');

@@ -14,4 +13,4 @@ exports.base = function() {

compact: false,
code:true,
presets: [ 'es2015-loose', 'stage-1'],
code: true,
presets: [['es2015', { loose: true }], 'stage-1'],
plugins: [

@@ -23,3 +22,3 @@ 'syntax-flow',

};
}
};

@@ -46,4 +45,4 @@ exports.commonjs = function() {

var options = exports.base();
options.presets = ['stage-1']
options.presets = ['stage-1'];
return options;
};

21

build/paths.js
var appRoot = 'src/';
var outputRoot = 'dist/';
<<<<<<< HEAD
var exporSrvtRoot = 'export/';
var jspmPackages = 'jspm_packages/';
var typings = 'typings/';
module.exports = {
root: appRoot,
source: appRoot + '**/*.js',
sourceMaps: "../maps",
html: appRoot + '**/*.html',
css: appRoot + '**/*.css',
sass: 'styles/**/*.scss',
cssOutput: outputRoot,
style: 'styles/**/*.css',
output: outputRoot,
exportSrv: exporSrvtRoot,
doc: './doc',
e2eSpecsSrc: 'test/e2e/src/*.js',
e2eSpecsDist: 'test/e2e/dist/',
=======
module.exports = {
root: appRoot,

@@ -34,3 +14,2 @@ source: appRoot + '**/*.js',

e2eSpecsDist: 'test/e2e/dist/'
>>>>>>> webpack_compatible
};

48

build/tasks/build.js

@@ -1,46 +0,1 @@

<<<<<<< HEAD
'use strict'
var gulp = require('gulp');
var bump = require('gulp-bump')
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var changed = require('gulp-changed');
var runSequence = require('run-sequence');
var paths = require("../paths")
var compilerOptions = {
moduleIds: false,
comments: false,
compact: false,
presets: ["es2015", "stage-0"],
plugins: ["transform-es2015-modules-commonjs", "transform-decorators-legacy", "transform-decorators", ]
};
gulp.task('build-html', function() {
return gulp.src(paths.html)
.pipe(gulp.dest(paths.output));
});
gulp.task('build-js', function() {
return gulp.src(paths.source)
.pipe(changed(paths.output), {extension: '.js'})
// .pipe(sourcemaps.init({loadMaps: true}))
.pipe(babel(compilerOptions))
// .pipe(sourcemaps.write({includeContent: true}))
.pipe(gulp.dest(paths.output));
});
gulp.task('bump-version', function() {
return gulp.src('./package.json')
.pipe(bump({type: 'patch'}))
.pipe(gulp.dest('./'));
})
gulp.task('build', function(callback) {
return runSequence(
['build-html', 'build-js'],
callback
)});
=======
let gulp = require('gulp');

@@ -52,3 +7,2 @@ let runSequence = require('run-sequence');

let assign = Object.assign || require('object.assign');
let replace = require('gulp-replace');

@@ -79,3 +33,2 @@ gulp.task('build-html', function() {

return gulp.src(paths.source)
.pipe(replace(/\.css\!/g, '.css'))
.pipe(to5(assign({}, compilerOptions.commonjs())))

@@ -104,2 +57,1 @@ .pipe(gulp.dest(paths.output + 'commonjs'));

});
>>>>>>> webpack_compatible

12

config.js
System.config({
defaultJSExtensions: true,
transpiler: false,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system",
"es7.decorators",
"es7.classProperties"
]
},
paths: {

@@ -15,2 +23,2 @@ "github:*": "jspm_packages/github/*",

}
});
});

8

gulpfile.js

@@ -1,11 +0,3 @@

<<<<<<< HEAD
/// <binding AfterBuild='build' />
// all gulp tasks are located in the ./build/tasks directory
// gulp configuration is in files in ./build directory
//require('require-dir')('build/tasks');
=======
// all gulp tasks are located in the ./build/tasks directory
// gulp configuration is in files in ./build directory
>>>>>>> webpack_compatible
require('require-dir')('build/tasks');

69

package.json
{
"name": "aurelia-froala-editor",
"version": "2.6.0",
"version": "2.7.0",
"description": "Aurelia plugin for Froala WYSIWYG HTML rich text editor.",

@@ -26,63 +26,54 @@ "keywords": [

},
"dependencies": {
"froala-editor": "^2.6.0"
},
"devDependencies": {
"aurelia-tools": "^0.2.4",
"babel-eslint": "^6.1.2",
"babel-plugin-syntax-flow": "^6.8.0",
"aurelia-tools": "^1.0.0",
"babel-eslint": "^7.1.1",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.11.5",
"babel-plugin-transform-es2015-modules-systemjs": "^6.11.6",
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-stage-1": "^6.5.0",
"conventional-changelog": "1.1.0",
"del": "^2.2.1",
"babel-plugin-transform-es2015-modules-amd": "^6.24.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
"babel-plugin-transform-es2015-modules-systemjs": "^6.23.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-1": "^6.22.0",
"conventional-changelog": "1.1.3",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-bump": "^2.2.0",
"gulp-bump": "^2.7.0",
"gulp-eslint": "^3.0.1",
"gulp-yuidoc": "^0.1.2",
"gulp-replace": "^0.5.4",
"isparta": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"jasmine-core": "^2.4.1",
"karma": "^1.1.2",
"jasmine-core": "^2.5.2",
"karma": "^1.5.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^1.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-jspm": "2.2.0",
"karma-jasmine": "^1.1.0",
"karma-jspm": "2.2.2",
"object.assign": "^4.0.4",
"require-dir": "^0.3.0",
"require-dir": "^0.3.1",
"run-sequence": "^1.2.2",
"vinyl-paths": "^2.1.0",
"yargs": "^4.8.1"
"yargs": "^7.0.2"
},
"dependencies": {
"froala-editor": "^2.6.0",
"aurelia-binding": "1.0.0",
"aurelia-dependency-injection": "^1.0.0"
},
"jspm": {
"registry": "npm",
"jspmPackage": true,
"main": "index",
"format": "amd",
"directories": {
"dist": "dist/amd"
"lib": "dist/system"
},
"peerDependencies": {},
"devDependencies": {
"aurelia-polyfills": "^1.0.0-beta.1.1.0"
},
"dependencies": {
"aurelia-polyfills": "^1.0.0",
"jquery": "npm:jquery",
"font-awesome": "npm:font-awesome",
"froala-editor": "npm:froala-editor@^2.6.0",
"aurelia-binding": "npm:aurelia-binding@^1.0.1",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0",
"aurelia-i18n": "npm:aurelia-i18n@^1.0.0",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0",
"aurelia-loader": "npm:aurelia-loader@^1.0.0"
"froala-editor": "npm:froala-editor^2.6.0",
"aurelia-binding": "npm:aurelia-binding@^1.0.0",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0"
}
}
}

347

README.md

@@ -5,49 +5,330 @@ # aurelia-froala-editor

## Install
## Table of contents
### With Webpack
Run:
1. [Installation instructions](#installation-instructions)
2. [Integration](#integration)
1. [With Aurelia CLI](#with-angular-cli)
2. [With Webpack](#with-webpack)
3. [With JSPM](#with-jspm)
3. [Usage](#usage)
4. [License](#license)
## Installation instructions
Install `aurelia-froala-editor` from `npm`
```bash
npm install aurelia-froala-editor
npm install angular-froala-editor --save
```
In your main.js or main.ts file:
## 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
// Font Awesome.
import 'font-awesome/css/font-awesome.css';
// Editor files.
import "froala-editor/js/froala_editor.pkgd.min";
...
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
- In your `src/app.html` include CSS files and Froala Editor component:
```html
<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>
```
- In `aurelia_project/aurelia.json` file set the builder loader plugins stub to `false`
```javascript
// Editor files.
import "froala-editor/js/froala_editor.pkgd.min.js";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/js/froala_editor.pkgd.min";
...
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
- ​
```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": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
},
{
"name": "aurelia-froala-wysiwyg",
"path": "../node_modules/aurelia-froala-wysiwyg/dist/amd",
"main": "index",
"resources": [
"froala-editor.js",
"froala-editor.html"
],
"deps": [
"jquery",
"font-awesome"
]
}
```
- Create a task to copy Font Awesome fonts:
```javascript
au generate task copy-assets
```
- Add Font Awesome paths to `aurelia_project/aurelia.json` file:
```javascript
{
"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
```bash
au start --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 .
#### 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";
...
// 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:
```html
<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:
```js
plugins: [
new AureliaPlugin(),
new ModuleDependenciesPlugin({
"aurelia-froala-wysiwyg": [ './froala-editor' ],
"parent-module": [ "child-module" ],
}),
]
```
#### Run application
```bash
npm run start
```
### With JSPM
Run:
#### 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 .
#### Add aurelia-froala-editor
- Install the aurelia plugin
```bash
jspm install aurelia-froala-editor
jspm install aurelia-froala-editor
```
In your main.js or main.ts file:
- In your `src/main.js` or `src/main.ts` file add:
```javascript
// Font Awesome.
import 'font-awesome/css/font-awesome.css!';
// Import jQuery
import * as $ from 'jquery';
// Editor JS.
// Import Editor.
import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css!';
...
froala.default();
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
- In your `src/app.html` include CSS files and Froala Editor component:
```html
<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 `package.json` file add the following overrides to the `jspm` entry:
```json
"overrides": {
"npm:froala-editor@^2.6.0": {
"main": "js/froala-editor.min",
"format": "global",
"shim": {
"js/froala-editor.min": {
"deps": [
"jquery"
]
}
}
}
}
```
- In `build/bundles.js` add `aurelia-froala-editor` to `dist/aurelia` bundles:
```javascript
module.exports = {
"bundles": {
...
"dist/aurelia": {
"includes": [
...
"froala/aurelia-froala-wysiwyg",
...
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
}
```
- Create a task to copy Font Awesome fonts:
```javascript
au generate task copy-assets
```
- Add Font Awesome paths to `aurelia_project/aurelia.json` file:
```javascript
{
"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 application
```bash
gulp watch
```
## Usage
#### Component
In an Aurelia template, just use the aurelia-froala custom element to instantiate an editor.

@@ -59,7 +340,8 @@

### Options
#### Options
All [configuration options](https://www.froala.com/wysiwyg-editor/docs/options) can be set via the config attribute.
```html
<froala-editor value.two-way="value"
<froala-editor
value.two-way="value"
config.bind="{

@@ -72,15 +354,26 @@ toolbarButtons: ['redo' , '|', 'fontFamily', '|', 'fontSize', '|', 'paragraphFormat', 'color', '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'],

fontSizeSelection: true
}">
</froala-editor>
}"></froala-editor>
```
### Events
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
All the [event handlers](https://www.froala.com/wysiwyg-editor/docs/events) are also available:
```html
<froala-editor value.two-way="value"
event-handlers.bind = "{
'paste.afterCleanup': processPaste
}>"
</froala-editor>
<froala-editor
value.two-way="value"
event-handlers.bind = "{
'paste.afterCleanup': processPaste
}"></froala-editor>
```

@@ -87,0 +380,0 @@

76

src/froala-editor.js

@@ -1,10 +0,9 @@

'use strict'
import {customElement, bindable, inject} from 'aurelia-framework';
import {inject, customElement, bindable} from 'aurelia-framework';
import {ObserverLocator} from "aurelia-binding";
import {I18N} from "aurelia-i18n";
import {EventAggregator} from 'aurelia-event-aggregator';
customElement('froala-editor')
@inject(Element, ObserverLocator, I18N, EventAggregator)
import {Config} from './froala-editor-config';
@customElement('froala-editor')
@inject(Element, Config, ObserverLocator, EventAggregator)
export class FroalaEditor {

@@ -17,7 +16,11 @@ @bindable value;

instance;
i18n;
i18nInitialized = false;
constructor(element, observerLocator, i18n, eventAggregator) {
constructor (element, config, observerLocator, eventAggregator) {
// Store element.
this.element = element;
// Read config.
this.config = config.options();
// Observe value.
this.subscriptions = [

@@ -29,29 +32,21 @@ observerLocator

this.instance.froalaEditor('html.set', newValue);
this.updateEmptyStatus();
}
})
];
this.i18n = i18n;
eventAggregator.subscribe('i18n:locale:changed', payload => {
this.processLanguageChanged();
});
}
processLanguageChanged() {
this.tearDownFroala();
this.setupFroala();
}
setupFroala() {
// Starting poing.
tearUp () {
// Get element.
this.instance = $(this.element.getElementsByTagName("div")[0]);
// Check if editor isn't already initialized.
if (this.instance.data('froala.editor')) {
return;
}
let c = {}
c.language = this.i18n.getLocale();
Object.assign(c, this.config);
this.instance.froalaEditor(c);
this.instance.froalaEditor('html.set', this.value);
// Set the HTML for the inner element.
this.instance.html(this.value);
// Set events.
if (this.eventHandlers && this.eventHandlers.length != 0) {

@@ -67,25 +62,26 @@ for(let eventHandlerName in this.eventHandlers) {

}
this.instance.on('froalaEditor.contentChanged,froalaEditor.blur', (e, editor) => this.value = editor.html.get());
}
this.instance.on('froalaEditor.contentChanged, froalaEditor.blur', (e, editor) => this.value = editor.html.get());
updateEmptyStatus() {
// Initialize editor.
this.instance.froalaEditor(Object.assign({}, this.config));
}
tearDownFroala() {
// Destroy.
tearDown () {
if (this.instance && this.instance.data('froala.editor')) {
this.instance.froalaEditor('destroy');
}
this.instance.froalaEditor('destroy');
}
this.instance = null;
}
attached() {
this.setupFroala();
// Setup.
attached () {
this.tearUp();
}
detached() {
this.tearDownFroala();
// Destroy.
detached () {
this.tearDown();
}
}
}

10

src/index.js

@@ -1,3 +0,11 @@

export function configure(aurelia, config) {
import {Config} from './froala-editor-config';
export function configure(aurelia, configCallback) {
const instance = aurelia.container.get(Config);
if (configCallback !== undefined && typeof(configCallback) === 'function') {
configCallback(instance);
}
aurelia.globalResources('./froala-editor');
}
build/tasks/watch.js
karma.conf.js
LICENSE
test/setup.js
test/unit/configure.spec.js
src/froala-editor.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc