en-trix-editor
is a component that wraps the excellent trix library in an ember component.
ember install en-trix-editor
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
.
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.
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.
Feel free to create an issue or submit a PR.