An addon for working with the Quill rich text editor in an Ember.js app.
ember install @abcum/ember-quill
The ember-quill addon adds functionality for working with Quill.js rich text editor instances, enabling efficient WYSIWYG editing, and collaboration between editor instances. Subscribe to editor events, and push changes to each editor instance using the quill service.
Add a basic Quill editor.
And specify a theme using the theme attribute.
And specify some initial html content for the editor.
Or specify the editor's initial content with a Delta object.
And perform an action when the editor content is modified.
Give the instance a name so multiple instances are synchronized and events can be sent and received from each instance.
Alternatively it is possible to subscribe to editor changes using the quillable service.
import Ember from 'ember';
export default Ember.Route.extends({
quillable: Ember.inject.service(),
setupController(controller, model) {
controller.set('model', model);
// Connect to a datastore and subscribe to changes
this.get('store').subscribe(change => {
this.get('quillable').update('editor', null, change);
});
},
activate() {
this.get('quillable').on('update', this, this.quill);
},
deactivate() {
this.get('quillable').off('update', this, this.quill);
},
quill(name, editor, delta, from, source) {
// Save each change to a datastore
this.get('store').push(delta);
},
});The following events are available on each quill-editor component.
| Event name | Event response |
|---|---|
| content-change | Emitted when the contents of have changed. Emits the full content as a Delta. |
| editor-change | Emitted when either text-change or selection-change events are emitted. |
| html-change | Emitted when the contents of have changed. Emits the full html content of the editor. |
| length-change | Emitted when the contents of have changed. Emits the length of the editor content. |
| selection-change | Emitted when the editor selection changes. Emits a selection Delta representing the selection. |
| text-change | Emitted when the editor selection changes. Emits a Delta object for each change in the editor. |
The following helpers are available.
| Helper name | Example output |
|---|---|
| delta | Converts an object to a Delta. |
| quill-set-contents | Runs quill.setContents on a named instance. |
| quill-set-text | Runs quill.setText on a named instance. |
| quill-update-contents | Runs quill.updateContents on a named instance. |
make install(install bower and ember-cli dependencies)make upgrade(upgrade ember-cli to the specified version)make tests(run all tests defined in the package)