aurelia-froala-editor
Advanced tools
Comparing version 2.3.3 to 2.3.4-1
@@ -0,0 +0,0 @@ var appRoot = 'src/'; |
@@ -0,0 +0,0 @@ 'use strict' |
@@ -0,0 +0,0 @@ var gulp = require('gulp'); |
@@ -0,0 +0,0 @@ /// <binding AfterBuild='build' /> |
{ | ||
"name": "aurelia-froala-editor", | ||
"version": "2.3.3", | ||
"version": "2.3.4-1", | ||
"description": "", | ||
"main": "index.js", | ||
"main": "indes.js", | ||
"scripts": { | ||
@@ -13,2 +13,3 @@ "test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"registry": "jspm", | ||
"author": "Net at Work GmbH", | ||
@@ -37,13 +38,22 @@ "license": "Apache", | ||
"font-awesome": "^4.6.3", | ||
"froala-editor": "^2.3.3", | ||
"froala-editor": "^2.3.4", | ||
"jquery": "^2.2.4" | ||
}, | ||
"jspm": { | ||
"directories": { | ||
"lib": "dist", | ||
"src": "src" | ||
}, | ||
"dependencies": { | ||
"css": "jspm:css", | ||
"froala-editor": "npm:froala-editor@^2.3.3", | ||
"jquery": "npm:jquery@^2.2.4", | ||
"font-awesome": "npm:font-awesome@^4.6.3" | ||
"css": "github:systemjs/plugin-css@^0.1.25", | ||
"font-awesome": "npm:font-awesome@^4.6.3", | ||
"froala-editor": "npm:froala-editor@^2.3.4", | ||
"jquery": "npm:jquery@^2.2.4" | ||
}, | ||
"devDependencies": { | ||
"babel": "npm:babel-core@^5.8.24", | ||
"babel-runtime": "npm:babel-runtime@^5.8.24", | ||
"core-js": "npm:core-js@^1.1.4" | ||
} | ||
} | ||
} |
122
readme.md
@@ -1,16 +0,11 @@ | ||
aurelia-froala-editor | ||
=== | ||
[![NPM version][npm-image]][npm-url] | ||
# aurelia-froala-editor | ||
This package provides a custom element for the [Froala editor](https://www.froala.com/wysiwyg-editor) in [Aurelia](http://aurelia.io/). | ||
>This package provides a custom element for the [Froala editor](https://www.froala.com/wysiwyg-editor) in [Aurelia](http://aurelia.io/). | ||
##Version 2 | ||
This repository contains bindings for the latest version of the Froala Editor (version 2). Version 1 of Froala is not supported. | ||
## Install | ||
Run | ||
##Install | ||
Run | ||
```bash | ||
jspm install npm:aurelia-froala-editor | ||
jspm install aurelia-froala-editor | ||
``` | ||
@@ -21,9 +16,10 @@ | ||
```javascript | ||
aurelia.use | ||
.standardConfiguration() | ||
aurelia.use | ||
.standardConfiguration() | ||
``` | ||
with | ||
```javascript | ||
.plugin('aurelia-froala', config => {}); | ||
.plugin('aurelia-froala-editor', config => {}); | ||
``` | ||
@@ -34,27 +30,30 @@ | ||
```html | ||
<aurelia-froala 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 | ||
}"> | ||
</aurelia-froala> | ||
<aurelia-froala 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 | ||
}"> | ||
</aurelia-froala> | ||
``` | ||
All the [event handlers](https://www.froala.com/wysiwyg-editor/docs/events) are also available: | ||
```html | ||
<aurelia-froala value.two-way="value" | ||
event-handlers.bind = "{ | ||
'paste.afterCleanup': processPaste | ||
}" | ||
<aurelia-froala value.two-way="value" | ||
event-handlers.bind = "{ | ||
'paste.afterCleanup': processPaste | ||
}>" | ||
</aurelia-froala> | ||
``` | ||
## Global configuration | ||
To use the editor, you'll need a licnse (see [Froala Website](https://www.froala.com/wysiwyg-editor) for details). Once you have obtained one, you can activate it using this snippet: | ||
```javascript | ||
config.setLicense("Your license key"); | ||
config.setLicense("Your license key"); | ||
``` | ||
@@ -65,36 +64,37 @@ | ||
```javascript | ||
aurelia.use | ||
.standardConfiguration() | ||
.plugin('aurelia-froala', config => { | ||
// Load plugins | ||
config.addPlugin("colors"); | ||
config.addPlugin("align"); | ||
config.addPlugin("code_beautifier"); | ||
config.addPlugin("image") // The image_manager plugin depends on the image plugin, so the former needs to loaded after the latter. | ||
.then(() => config.addPlugin("image_manager")); | ||
aurelia.use | ||
.standardConfiguration() | ||
.plugin('aurelia-froala', config => { | ||
// Load plugins | ||
config.addPlugin("colors"); | ||
config.addPlugin("align"); | ||
config.addPlugin("code_beautifier"); | ||
config.addPlugin("image") // The image_manager plugin depends on the image plugin, so the former needs to loaded after the latter. | ||
.then(() => config.addPlugin("image_manager")); | ||
// Create a custom button | ||
config.global(editor => { | ||
// Define an icon | ||
editor.DefineIcon("insertFromServerIcon", {NAME: "folder"}) | ||
// Register the new command. It can now be added to a toolbar using the command 'insertFromServer' | ||
editor.RegisterCommand('insertFromServer', { | ||
title: 'Insert from server', | ||
icon: 'insertFromServerIcon', | ||
undo: true, | ||
focus: true, | ||
refreshAfterCallback: true, | ||
callback: function () { | ||
console.log("Insert from server"); | ||
} | ||
}); | ||
// Create a custom button | ||
config.global(editor => { | ||
// Define an icon | ||
editor.DefineIcon("insertFromServerIcon", {NAME: "folder"}) | ||
// Register the new command. It can now be added to a toolbar using the command 'insertFromServer' | ||
editor.RegisterCommand('insertFromServer', { | ||
title: 'Insert from server', | ||
icon: 'insertFromServerIcon', | ||
undo: true, | ||
focus: true, | ||
refreshAfterCallback: true, | ||
callback: function () { | ||
console.log("Insert from server"); | ||
} | ||
}); | ||
}); | ||
// Add another language | ||
config.addLanguage("de", { | ||
"Insert from server": "Vom Server einfügen", | ||
}) | ||
}) | ||
} | ||
// Add another language | ||
config.addLanguage("de", { | ||
"Insert from server": "Vom Server einfügen", | ||
}) | ||
}) | ||
} | ||
``` | ||
If you add custom plugins or commands you might want to localize them. This is done by providing the localized strings in the second parameter of the addLanguage method. | ||
@@ -104,6 +104,4 @@ | ||
#Licencing | ||
While this package is licenced under the Apache licence, the Froala editor itself is not. Check out the [Froala Website](https://www.froala.com/wysiwyg-editor) for details. | ||
## License | ||
[npm-url]: https://npmjs.org/package/aurelia-froala-editor | ||
[npm-image]: http://img.shields.io/npm/v/aurelia-froala-editor.svg | ||
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). |
@@ -0,0 +0,0 @@ 'use strict' |
@@ -0,0 +0,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
33502
16
475
0
3
104
Updatedfroala-editor@^2.3.4