Ember-cli-summernote-editor NPM

ember-cli-summernote-editor

A wrapper around the summernote library for use in ember-cli projects

Installation

ember install ember-cli-summernote-editor

Usage

Handlebar Template

import Ember from 'ember';

export default Ember.Controller.extend({
  height: 200,
  value: "Some intial contents go here. Lorem Ipsum is simply dummy text of the printing.",
  disabled: false,

  actions: {
    changeHeight(someObject) {
      let height = someObject.doSomeCalculationToGetHeight();
      set(this, 'height', height)
    }
  }
});

{{summernote-editor
  focus=false
  btnSize=bs-sm
  airMode=false
  height=height
  buttons=buttons
  toolbar=toolbar
  disabled=disabled
  callbacks=callbacks
  content=(readonly value)
  onContentChange=(action (mut value))
}}

Custom buttons usage

In hbs file

    {{summernote-editor content=article buttons=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');
      },
    },