# en-trix-editor

> ember.js WYSWYG component using the trix editor

Latest version **0.1.0** (published 2016-05-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install en-trix-editor
pnpm add en-trix-editor
yarn add en-trix-editor
bun add en-trix-editor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2016-05-22 |
| First published | 2016-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | swastik |
| Keywords | trix, editor, wyswyg, contenteditable |

## Links

- npm: https://www.npmjs.com/package/en-trix-editor
- npm.io page: https://npm.io/package/en-trix-editor

## Dependencies (1)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^5.0.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2016-05-22

## README

# en-trix-editor

`en-trix-editor` is a component that wraps the excellent [trix](https://github.com/basecamp/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.

---
_Source: https://npm.io/package/en-trix-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._