en-editor

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

Installation

ember install en-editor

Usage

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

  {{en-editor
    on-change-html=(action (mut someValue))}}

It exposes two actions: on-change-html and on-change-text. They give you the HTML and text values respectively. You can then do whatever you want with it.

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

There's no default styling. Feel free to add your own.

Bugs? Questions?

Feel free to create an issue or submit a PR.