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.
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.
; ObjectController;
As a result to follow DDAU
, the summernote internall callback onChange
will not be supported through the callbacks
property in a consumming application.
{{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.
toolbarOptions: style: false insert: picture: false help: false
Custom buttons usage
In hbs file
summer-note content=article customButtons=customButtons
In controller file
; Controller;
All callbacks except onChange
are supported.
The onChange
callback are used internally for the onContentChange
action.
callbackOptions: { console; } { console; } { console; }
config/environment.js
The bootstrap resources will not be imported to your resources by default.
Also you can set lang
option for the editor.
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.
; ;
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.