Ember-cli-summernote NPM

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

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.

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.

{{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

    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: '<i class="fa fa-file-text-o"/> New div',
                    tooltip: 'New div',
                    click: _onNewBlock
                });

                return button.render();
            }

            this.customButtons.push(newBlockButton);

        },

        onNewBlock() {
            let blocks = '<div class="header" id="headerBlock"></div>';
            this.set('article', article + blocks);
        }
    });

All callbacks except onChange are supported.

The onChange callback are used internally for the onContentChange action.

    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.

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.

fillInSummernote('.summernote-container', '<p>Test Text Entered.</p>');

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