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: about 1 month 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-20T15:23:06.000Z (about 7 years ago)
• Last Synced: 2024-02-15T02:33:32.573Z (10 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

  

  ````