ember-tinymce

ember-tinymce 📃

This addon provides TinyMCE v6 (a wysiwyg-editor) as an ember component.

Installation

To get started simply install the addon:

ember install ember-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 Data Down, Actions Up (DDAU) guidelines please define the onValueChanged action.

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

and in your controller

  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:

{{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) or you can serve the assets yourself (self hosted).

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 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:

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:

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

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

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
• Installing via ZIP

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

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:

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 to obtain your SRI hash.

Thankyou

Thank you to 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/.

Changelog

0.3.0 (2024-04-22)

Features

• allow the ability to configure a path when self-hosting (bundling) tinymce (0baa082)