Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ben-girardet/aurelia-summernote

Wrap Summernote WYSIWYG editor into an aurelia custom element
https://github.com/ben-girardet/aurelia-summernote

Last synced: 3 months ago
JSON representation

Wrap Summernote WYSIWYG editor into an aurelia custom element

Host: GitHub
URL: https://github.com/ben-girardet/aurelia-summernote
Owner: ben-girardet
License: cc0-1.0
Created: 2017-08-25T07:27:55.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2017-11-20T15:23:06.000Z (almost 7 years ago)
Last Synced: 2024-02-15T02:33:32.573Z (9 months ago)
Language: JavaScript
Size: 1.18 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-summernote - aurelia-summernote

README

## Features

Adds a simple to use, yet flexible Aurelia Custom Element into your project.

## Install using Aurelia CLI

1. Install dependencies

Summernote is built on Boostrap and Jquery. This plugin doesn't directly depends on these librairies so that you can decide on how you include them in your project. If needed, below is an example on how you can add them properly in your Aurelia CLI project.

2. Install the plugin

```shell
npm install aurelia-summernote
```

3. Configure your `aurelia.json` file

```js
"dependencies": [
//...
// the following lines to link to the plugin
{
"name": "aurelia-summernote",
"path": "../node_modules/aurelia-summernote/dist/amd",
"main": "index"
},
// the following lines to link to the summernote dependency
{
"name": "summernote",
"path": "../node_modules/summernote/dist",
"main": "summernote",
"exports": "$",
"deps": ["jquery"],
"resources": [
"summernote.css"
]
}
],
"copyFiles": {
//...
// this will copy the font files in the /font folder of your project
// to make them available for summernote CSS
"node_modules/summernote/dist/font/*": "font",
}
```

4. In your `main.js`

```js
aurelia.use.feature('aurelia-summernote')
```

If you want to provide custom default options, you can instanciate the plugin like so:

```js
aurelia.use.feature('aurelia-summernote', {
// add here any options from summernote documentation
height: 600,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']]
]
})
```

5. Finally in your code you can use the Custom Element

```html

```

Again if you need custom options for this specific instance, you can bind an option object to the custom element

```html

```

## How to install jQuery and Bootstrap with Aurelia CLI ?

1. Install the librairies

```shell
npm install bootstrap jquery --save
````

2. Configure your `aurelia.json` file

```js
"dependencies": [
//...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
],
"copyFiles": {
//...
"node_modules/bootstrap/dist/fonts/*": "bootstrap/fonts",
// ...
}
```

3. In your app.css template

```html

````