npm package: @linc-technologies/ember-tinymce
Description: An ember addon to bring TinyMCE v6 to ambitious applications!
Author: Matthew Hartstonge
Latest version: 0.4.1

# @linc-technologies/ember-tinymce 📃

This addon provides [TinyMCE v6](https://www.tinymce.com/) (a wysiwyg-editor) as an ember component. 

## Installation
To get started simply install the addon:

```
ember install @linc-technologies/ember-tinymce
```

### Component

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

 - *options* attribute is full powered to [tinymce documentation](https://www.tiny.cloud/docs/configure/). 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 [Data Down, Actions Up (DDAU)](https://discuss.emberjs.com/t/readers-questions-what-is-meant-by-the-term-data-down-actions-up/15311)
guidelines please define the `onValueChanged` action.

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

and in your controller

```js
  actions: {
    ...
    myonValueChangedAction(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

TinyMCE can be used in your project by using the version from their CDN ([cloud deployment](https://www.tiny.cloud/docs/tinymce/latest/cloud-deployment-guide/))
or you can serve the assets yourself ([self hosted](https://www.tiny.cloud/docs/tinymce/latest/zip-install/)).

Using the self-hosted version has extra requirements depending on the version you are using. For example, in version 6.0
the license for the source code was MIT, and has since been changed to GPL2 for 7.0. This [blog post](https://www.tiny.cloud/blog/tinymce-free-wysiwyg-html-editor/#h_20985795323301710993368773)
by tiny explains a little bit about what this may mean for your own project. It is recommended that you seek full understanding
of your obligations when using TinyMCE, ensuring that you seek legal advice where clarification is necessary (This is not legal advice.)

#### Cloud Version

You can load TinyMCE using a free API Key by signing up for [tiny's CDN](https://www.tiny.cloud/):

```js
ENV:{
  ...,
  tinyMCE:{
    apiKey: 'my-api-key',
    version: '6.0' //default 6.3.1-12
  }
}
```

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

Set this to `false` to disable including TinyMCE automatically on app load:

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

You can then load TinyMCE, as required, in your routes like so (example uses JQuery integration):

```js
beforeModel(){
  this._super(...arguments);
  if (typeof tinymce == 'undefined'){
    return this.$().getScript('https://cdn.tiny.cloud/1/my-api-key/tinymce/6.3.1-12/tinymce.min.js');
  }
}
```

#### Self Hosting

This ember addon does not include the ability to retrieve a version of TinyMCE at build time, so you will have to 
retrieve a copy of TinyMCE via another means. We recommend either:

 - [Installing via NPM](https://www.tiny.cloud/docs/tinymce/6/npm-projects/)
 - [Installing via ZIP](https://www.tiny.cloud/docs/tinymce/6/zip-install/)

The plugin can then be configured with a path to the main javascript file, which will change where the script is loaded from.
The following example is for a project that has the TinyMCE assets included in the `./public/assets` folder that are served
alongside the main app

```js
ENV:{
  ...,
  tinyMCE: {
    selfHostedPath: '/assets/tinymce_6.7.1/js/tinymce/tinymce.min.js',
  },
}
```

### Subresource Integrity (SRI Hash)
This addon supports bring-your-own SRI Hash validation for ensuring the scripts
provided to users haven't been maliciously changed.

You can configure this in your app's environment settings:

```js
ENV:{
  ...,
  tinyMCE:{
    apiKey: 'no-api-key',
    version: '6.0.3-5', // default 6.3.1-12
    sriHash: 'sha256-uDkApJhas9elGSPVPNPL0G7Bx1ByJXaLs/pHRWw+jiQ= sha384-XiP+FxwEyDw3bQ3oaYepXptVvd2GnmhcTYXv/QEQzMxL2nP9//HSOnOLp5mSUpLU sha512-eMxKG/y1PO1+chyji1h9Jkf2j9MP5UOP8szi1IIjRTdzG6Bak2kw3VpQ54hn4sUauEbOWoDFH87ecw4Y/YYj2w=='
  }
}
```

If you are using tiny cloud, the easiest way to generate this string is to add
`report-uri.com` as a trusted domain. Then using your generated URI (with API 
key and TinyMCE version) head to [Create your SRI hash](https://report-uri.com/home/sri_hash)
to obtain your SRI hash.

## Thankyou

Thank you to [marucjmar/ember-cli-tinymce](https://marucjmar/ember-cli-tinymce)
for providing the basis of this updated implementation.
Please send a :star: his way.

## MIT License

Much like TinyMCE, we decided to follow suit and use the MIT license. 

A quick overview:
- This addon can be used in proprietary software, free of charge. 
- You can do whatever you want as long as you include the original copyright 
  and license notice in any copy of the software/source.

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