ember-summernote-lite
v1.0.13
Published
ember-cli addon for summernote-lite wysiwyg editor
Downloads
3
Readme
ember-summernote-lite
Description
A wrapper around the "lite" version of summernote for use in ember-cli projects.
This is a fork of devotox's ember-cli-summernote-editor, which removes the dependency on Bootstrap by using the "lite" version of summernote.
Installation
ember install ember-summernote-lite
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-lite
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-lite 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
License
MIT license.