Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vsymguysung/ember-cli-summernote
ember cli addon for summernote
https://github.com/vsymguysung/ember-cli-summernote
addon ember-cli-summernote javascript summernote
Last synced: about 1 month ago
JSON representation
ember cli addon for summernote
- Host: GitHub
- URL: https://github.com/vsymguysung/ember-cli-summernote
- Owner: vsymguysung
- License: mit
- Created: 2014-12-06T21:25:22.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T03:30:57.000Z (almost 6 years ago)
- Last Synced: 2024-05-14T09:47:06.927Z (8 months ago)
- Topics: addon, ember-cli-summernote, javascript, summernote
- Language: JavaScript
- Size: 974 KB
- Stars: 31
- Watchers: 3
- Forks: 22
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-summernote - ember-cli-summernote
README
# Ember-cli-summernote
[](http://travis-ci.org/vsymguysung/ember-cli-summernote)
[](https://www.npmjs.org/package/ember-cli-summernote)
[](http://badge.fury.io/js/ember-cli-summernote)
[](http://emberobserver.com/addons/ember-cli-summernote)
## Description
Ember-cli-summernote is an Ember CLI add-on. This addon actually converts summernote to an Ember component which is
a re-usable unit. This is still a work in progress. Pull requests are welcome.
[DEMO](http://vsymguysung.github.io/ember-cli-summernote/)
## Installation
```
# install via npm
$ npm install ember-cli-summernote --save-dev
# make ember-cli fetch internal dependencies
$ ember g ember-cli-summernote
```
## Basic Usage
### Handlebar Template
As of version `1.1.0`, the addon embraces `DDAU`.
The `content` property is readonly and `onContentChange` action is used for updated contents.
```javascript
import Ember from 'ember';
export default Ember.ObjectController.extend({
contentHeight: 200,
postContent: "Some intial contents go here. Lorem Ipsum is simply dummy text of the printing.",
editingDisabled: false,
actions: {
onContentChange(text) {
set(this, 'postContent', text);
},
changeHeight(someObject) {
let height = someObject.doSomeCalculationToGetHeight();
set(this, 'contentHeight', height)
}
}
});
```
As a result to follow `DDAU`, the summernote internall callback `onChange` will not be supported through the `callbacks` property in a consumming application.
```handlebars
{{summer-note height=contentHeight
btnSize=bs-sm
airMode=false
focus=false
header="Example"
content=(readonly postContent)
onContentChange=(action 'onContentChange')
disabled=editingDisabled
callbacks=callbackOptions
toolbarOptions=toolbarOptions}}
```
Example of configuring the toolbar options.
```javascript
toolbarOptions: {
style: false,
insert: {
picture: false
},
help: false
}
```
### Custom buttons usage ###
In hbs file
```javascript
{{summer-note content=article customButtons=customButtons}}
```
In controller file
```javascript
import Ember from 'ember';
export default Ember.Controller.extend({
article: 'some text',
customButtons: [],
init() {
let _onNewBlock = this.get('onNewBlock').bind(this);
let newBlockButton = function (context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: ' New div',
tooltip: 'New div',
click: _onNewBlock
});
return button.render();
}
this.customButtons.push(newBlockButton);
},
onNewBlock() {
let blocks = '
';
this.set('article', article + blocks);
}
});
```
All callbacks except `onChange` are supported.
The `onChange` callback are used internally for the `onContentChange` action.
```javascript
callbackOptions: {
onInit: function() {
console.log('Summernote is launched');
},
onEnter: function() {
console.log('Enter/Return key pressed');
},
onPaste: function(e) {
console.log('Called event paste');
},
},
```
### config/environment.js ###
The bootstrap resources will not be imported to your resources by default.
Also you can set `lang` option for the editor.
```javascript
var ENV = {
modulePrefix: 'dummy',
environment: environment,
...
'ember-cli-summernote': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"lang": "en-US // "ru-RU" //"lang": "en-US"
}
}
```
## Test Helper
This addon also provides a convenient test helper to interact with the editor
in acceptance tests.
```js
fillInSummernote('.summernote-container', '
Test Text Entered.
');
getContentFromSummernote('.summernote-container');
```
## Demo
You can clone this repo and run the app
```
$ sudo npm install -g ember-cli
# clone the codebase
$ git clone http://github.com/vsymguysung/ember-cli-summernote.git
$ cd ember-cli-summernote
# install dependencies
$ npm install; bower install
# fire up local server
$ ember serve
# visit the page with the following url.
http://localhost:4200
```
#### Inspired by
* Summernote(Super simple WYSIWYG Editor) (https://github.com/summernote/summernote)
* Heather Brysiewicz's blog post (http://hbrysiewicz.github.io/2014-04-18-summernote-ember-wysiwyg.html)
#### License
MIT license.