ember-cli-summernote-editor

2.0.5 • Public • Published

Ember Observer Score Build Status Coverage Status NPM Version NPM Downloads Greenkeeper badge

ember-cli-summernote-editor

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

DEMO

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');
      },
    },

Available options

See original library Summernote

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i ember-cli-summernote-editor

Weekly Downloads

5

Version

2.0.5

License

MIT

Unpacked Size

12.2 kB

Total Files

8

Last publish

Collaborators

  • devotox