ember-cli-tinymce

KO | EN

gitlite — search

#react #ai #typescript #golang #android #machine-learning #deep-learning #linux #nodejs #java #windows #cli #vue #pytorch

ember-cli-tinymce

(★ 39)

The ember wysiwyg editor powered by tinyMCE

ember-cli-tinymce Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ember-cli-tinymce

[![Build Status](https://travis-ci.org/marucjmar/ember-cli-tinymce.svg?branch=master)](https://travis-ci.org/marucjmar/ember-cli-tinymce)

This ember-cli addon provides you with a wysiwyg-editor component, based on [TinyMCE](https://www.tinymce.com/)

## Demo

[Demo page](http://marucjmar.github.io/ember-cli-tinymce)

## Installation

To get started simply install the addon:

ember install ember-cli-tinymce

### Component

```hbs
{{tinymce-editor options=options value=text}}
```

- _options_ attribute is full powered to [tinymce documentation](https://www.tiny.cloud/docs/configure/integration-and-setup/). Changing the options will cause the editor to reload.
- _value_ - the html text generated by editor.

If you need to display the _value_, use the _{{{value}}}_ helper for HTML text in the handlebars to prevent escaping.

## Data down actions up

By default the value is updated in the addon. If you want to follow the data-down-actions-up guidlines please define the onValueChanged action.

```hbs
{{tinymce-editor options=options value=text onValueChanged=(action "myOnChangedAction")}}
```

and in your controller

```js
  actions:{
    ...
    myOnChangedAction (value) => {
      // Do something with the value.
      // At least the text should be updated:
      this.set('text', value)
    }
  }
```

Or, as a shorthand using the `mut` helper:

```hbs
{{tinymce-editor options=options value=text onValueChanged=(action (mut text))}}
```

### Including TinyMCE

You can load TinyMCE from a CDN:

```js
ENV:{
  ...,
  tinyMCE:{
    apiKey: '6ws......' // required
    refererPolicy: "anonymous", //default origin
    version: 5.1 //default 5.5
  }
}
```

Be aware _ver_ is a semver reflection of the Tinymce CDN which can introduce issues if a bad release is automatically picked up by your application

You can load TinyMCE from a self hosted source:

```js
ENV:{
  ...,
  tinyMCE:{
    scriptSrc: 'https://path/to/locally-hosted/tinymce/js/tinymce.min.js'
  }
}
```

Remember if your self hosted resource resides in a different domain than your application, ensure you configure CORS otherwise aspects of the editor such as fonts, styles, skins, etc. may fail to load due to cross site scripting safety measures.

Set this to `false` to disable including automatically:

```js
ENV:{
  ...,
  tinyMCE:{
    load: false
  }
}
```

And you can load it in your routes like so:

```js
beforeModel(){
  this._super(...arguments);
  if (typeof tinymce == 'undefined'){
    return Ember.$.getScript('//cdn.tinymce.com/4/tinymce.min.js');
  }
}
```

## My reputation

If you used and love this addon You can help me with my reputation, when you give me a star on github :+1: :star:

## MIT License

This README outlines the details of collaborating on this Ember addon.

For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).

ember-cli-tinymce

ember-cli-tinymce Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ember-cli-tinymce

ember-cli-tinymce Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README