# ember-tui-editor
> TOAST UI WYSIWYG markdown editor for Ember.
Latest version **4.0.0** (published 2024-10-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install ember-tui-editor
pnpm add ember-tui-editor
yarn add ember-tui-editor
bun add ember-tui-editor
```
## Health
**Score 25/100 (F)** — status: maintenance-mode.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-10-16 |
| First published | 2018-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 18 |
| Dependencies | 10 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Till Theato |
| Maintainers | miguelcobain, ttill |
| Keywords | ember-addon, ember, markdown, toast ui, wysiwyg |
## Links
- npm: https://www.npmjs.com/package/ember-tui-editor
- Repository: https://github.com/evocount/ember-tui-editor
- Homepage: https://github.com/evocount/ember-tui-editor#readme
- Issues: https://github.com/evocount/ember-tui-editor/issues
- npm.io page: https://npm.io/package/ember-tui-editor
## Dependencies (10)
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.25.2
- [ember-lifeline](https://npm.io/package/ember-lifeline.md) ^7.0.0
- [ember-modifier](https://npm.io/package/ember-modifier.md) ^4.2.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^8.2.0
- [@toast-ui/editor](https://npm.io/package/@toast-ui/editor.md) ^3.2.2
- [@glimmer/tracking](https://npm.io/package/@glimmer/tracking.md) ^1.1.2
- [ember-auto-import](https://npm.io/package/ember-auto-import.md) ^2.8.1
- [@glimmer/component](https://npm.io/package/@glimmer/component.md) ^1.1.2
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^6.3.0
- [ember-render-helpers](https://npm.io/package/ember-render-helpers.md) ^1.0.2
## Alternatives
- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads
## Recent versions
- 4.0.0 (latest) — 2024-10-16
- 2.0.1 (version-2) — 2021-11-09
- 3.0.10 — 2023-07-24
- 3.0.9 — 2023-07-07
- 3.0.8 — 2023-07-07
- 3.0.7 — 2023-07-06
- 3.0.6 — 2023-07-03
- 3.0.5 — 2022-09-30
- 3.0.4 — 2022-08-16
- 3.0.3 — 2022-06-13
- 3.0.2 — 2022-06-08
- 3.0.1 — 2021-11-09
- 3.0.0 — 2021-07-28
- 2.0.0 — 2021-01-23
- 1.1.0 — 2020-06-02
- … 16 more at https://npm.io/package/ember-tui-editor/versions
## README
[](https://badge.fury.io/js/ember-tui-editor)
# ember-tui-editor
[TOAST UI](https://github.com/nhnent/tui.editor) WYSIWYG markdown editor for Ember. ([Demo](https://evocount.github.io/ember-tui-editor/))
## Compatibility
- Ember.js v3.28 or above
- Ember CLI v4.12 or above
- Node.js v18 or above
## Installation
```
ember install ember-tui-editor
```
## Usage
```hbs
```
### Properties
For a list of possible options and their defaults have a look at the [TOAST UI docs](https://nhn.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor).
You can pass the properties as a hash to `options` using their original names just as you would when using TUI editor directly. Alternatively set them directly on the component. The later version has the advantage that some properties are bound. However mind the different naming (see table).
The following table lists some special properties (bound, different name) only:
| Property | TUI name | Is Bound? | Notes |
| -------------- | ----------------- | :-------: | ------------------------------------------------------------ |
| `height` | | x | |
| `minHeight` | | x | |
| `value` | `initialValue` | x | Changes do not propagate to `value` ("data down, action up") |
| `previewStyle` | | x | |
| `editType` | `initialEditType` | x | |
| `viewer` | | | Do not show editor but markdown viewer only |
| `language` | | | This loads the appropriate locale file automatically |
### Actions
| Event | Description |
| --------------- | ---------------------------------------------- |
| `onLoad` | Emitted when editor is fully loaded |
| `onChange` | Emitted when content changed |
| `onCaretChange` | Emitted when format changed by cursor position |
| `onFocus` | Emitted when editor gets focus |
| `onBlur` | Emitted when editor looses focus |
### i18n
Based on the `@language` argument you pass in, ember-tui-editor will automatically load the corresponding locale file.
For a list of all available locales check [here](https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/i18n.md#supported-languages).
### Plugins
A list of plugins can be passed to `@plugins` (just as they would be passed to vanilla TOAST UI editor). Import is not handled by this addon and has to happen in app.
```js
import chart from '@toast-ui/editor-plugin-chart';
export default MyComponent extends Component {
// ...
editorPlugins = [chart];
//..
}
```
```hbs
```
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).
---
_Source: https://npm.io/package/ember-tui-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._