This package has been deprecated

    Author message:

    Package no longer supported. Use github.com/abcum/ascua instead.

    @abcum/ember-quill

    2.0.0 • Public • Published

    ember-quill

    An addon for working with the Quill rich text editor in an Ember.js app.

    Usage

    Installation

    ember install @abcum/ember-quill

    Introduction

    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.

    Examples

    Add a basic Quill editor.

    {{quill-editor placeholder='Enter some text here...'}}

    And specify a theme using the theme attribute.

    {{quill-editor placeholder='Enter some text here...' theme='bubble'}}

    And specify some initial html content for the editor.

    {{quill-editor placeholder='Enter some text here...' html=model.html}}

    Or specify the editor's initial content with a Delta object.

    {{quill-editor placeholder='Enter some text here...' delta=(delta model.content)}}

    And perform an action when the editor content is modified.

    {{quill-editor placeholder='Enter some text here...' content-change=(action (mut model.content))}}

    Give the instance a name so multiple instances are synchronized and events can be sent and received from each instance.

    {{quill-editor placeholder='Enter some text here...' name='editor'}}

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

    Events

    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.

    Helpers

    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.

    Development

    • 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)

    Keywords

    Install

    npm i @abcum/ember-quill

    DownloadsWeekly Downloads

    65

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • tobiemh