GithubHelp home page GithubHelp logo

miguelcobain / ember-tui-editor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from evocount/ember-tui-editor

0.0 2.0 0.0 2.55 MB

Use TOAST UI markdown editor in Ember

License: MIT License

JavaScript 74.56% HTML 10.44% CSS 3.04% Handlebars 11.96%

ember-tui-editor's Introduction

npm version

ember-tui-editor

TOAST UI WYSIWYG markdown editor for Ember. (Demo)

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

ember install ember-tui-editor

Usage

<TuiEditor
  @value="# Hello World"
  @onChange={{this.onChange}}
/>

Properties

For a list of possible options and their defaults have a look at the TOAST UI docs.

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
onStateChange 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.

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.

import chart from '@toast-ui/editor-plugin-chart';

export default MyComponent extends Component {
  // ...
  editorPlugins = [chart];
  //..
}
<TuiEditor
  @value="# Hello World"
  @onChange={{this.onChange}}
  @plugins={{this.editorPlugins}}
/>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-tui-editor's People

Contributors

dependabot-preview[bot] avatar dependabot-support avatar ember-tomster avatar miguelcobain avatar ttill avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.