Ember-trix NPM

ember-trix

This ember addon wrapped trix editor from Basecamp. Trix is a WYSIWYG editor, visit their demo site to know more about it.

Installation

$> ember install ember-trix

Example

Dummy page in test can help you understand the coding example. Here is an snippet about how to use closure action to save content.

/* /tests/dummy/app/controllers/index.js */
...
actions{
  handleTrixEvent(event) {
    ...
    let document = event.target.editor.getDocument();
    let raw = Trix.serializeToContentType(document, 'text/html');
    set(this, 'raw', raw);
  }
  ...
}

/* /tests/dummy/app/templates/index.hbs */
...
{{ember-trix
  autofocus=true
  class="my-trix-editor"
  placeholder="Type Something or Drag an Image here"
  trix-attachment-add=(action "handleTrixAttachmentAddEvent")
  trix-attachment-remove=(action "handleTrixEvent")
  trix-blur=(action "handleTrixEvent")
  trix-change=(action "handleTrixEvent")
  trix-file-accept=(action "handleTrixEvent")
  trix-focus=(action "handleTrixEvent")
  trix-initialize=(action "handleTrixInitializeEvent")
  trix-selection-change=(action "handleTrixEvent")
}}
..

The accepted parameters are autofocus, class, placeholder, and you can assign your closure actions as trix event handler.

The built-in events are: