Ember-cli-tinymce NPM

Ember-cli-tinymce

This ember-cli addon provides you with a wysiwyg-editor component, based on TinyMCE

Demo

Installation

To get started simply install the addon:

 ember install ember-cli-tinymce

Component

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

options attribute is full powered to tinymce documentation. 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.

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

and in your controller

  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:

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

Including TinyMCE

You can load TinyMCE from a CDN:

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:

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:

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

And you can load it in your routes like so:

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