en-trix-editor v0.1.0

en-trix-editor

en-trix-editor is a component that wraps the excellent trix library in an ember component.

Installation

ember install en-trix-editor

Usage

You get a component en-editor that you can use something like this:

  {{en-editor
    onChange="editorDidChange"}}

It exposes an onChange action that is triggered whenever the text inside the editor changes. You can handle it something like this:

  editorDidChange (value) {
    this.set('value', value.html)
  }

The argument that's sent (value in this case) is an object with two properties: html and text.

You can pass in other options such as the value and the placeholder. In case you want to disable the toolbar, you can do that, too, by passing in the boolean showToolbar and setting it to false.

Known limitations

If you need to change the editor's contents after some time (for example, a promise resolves and you have new content to populate), there is no native way to do so.

However, there is a workaround. en-editor emits the onInit action with the editor element when it's initialized. You can store that on the parent component (or controller) and simply change its innerHTML property.

Styling

en-trix-editor comes with its own styles. At the moment, there is no way to customize it (other than overriding the CSS), but I plan to introduce something in the future.

Bugs? Questions?

Feel free to create an issue or submit a PR.