@abcum/ember-quill 中文文档教程

Question

ember-quill

用于在 Ember.js 应用程序中使用 Quill 富文本编辑器的插件。

Usage

Installation

ember install @abcum/ember-quill

Introduction

ember-quill 插件添加了使用 Quill.j 的功能 s 富文本编辑器实例，支持高效的所见即所得编辑，以及编辑器实例之间的协作。 订阅编辑器事件，并使用 quill 服务将更改推送到每个编辑器实例。

Examples

添加一个基本的 Quill 编辑器。

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

并使用 theme 属性指定主题。

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

并为编辑器指定一些初始的 html 内容。

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

或者使用 Delta 对象指定编辑器的初始内容。

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

并在修改编辑器内容时执行操作。

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

为实例命名，以便同步多个实例，并且可以从每个实例发送和接收事件。

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

或者，可以使用 quillable 服务订阅编辑器更改。

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

以下事件在每个 quill-editor 组件上可用。

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

以下助手可用。

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)