Skip to content

Instantly share code, notes, and snippets.

Last active August 15, 2018 11:30
Show Gist options
  • Save mihai-scurtu/4a488007cfd150f09a4d to your computer and use it in GitHub Desktop.
Save mihai-scurtu/4a488007cfd150f09a4d to your computer and use it in GitHub Desktop.
Integrating TinyMCE in an ember-cli app

Integrating TinyMCE in an ember-cli app

TinyMCE is a javascript WYSIWYG editor that is highly configurable and has a ton of features and plugins. It integrates with jQuery and, with a bit of work, it can be integrated in your ember-cli app.

Step 1: Install TinyMCE:

bower install --save tinymce

Step 2: Import the required files into your app via broccoli. In order to do that you will need a plugin called broccoli-static-compiler:

npm install --save-dev broccoli-static-compiler

Next you need to add all the files.

// Brocfile.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');

var app = new EmberApp();

// import the main file
app.import('bower_components/tinymce/tinymce.min.js', {destDir: 'assets/tinymce'});

// import the jquery integration file 
app.import('bower_components/tinymce/jquery.tinymce.min.js', {destDir: 'assets/tinymce'});

// import all the assets (technically you could be more precise in picking just the plugins and themes that you require, but for brevity's sake this will work)
var tinymceAssets = pickFiles('bower_components/tinymce/', {
  srcDir: '/',
  files: ['**/*.min.js', '**/*.min.css', '**/*.woff', '**/*.ttf'],
  destDir: '/tinymce'
module.exports = app.toTree([tinymceAssets]);

Step 3: Integrate the editor in your component (_ is lodash)

// app/components/text-editor.js

import Ember from 'ember';

/* global _ */

export default Ember.Component.extend({
  classNames: ['text-editor'],

  _options: {
    skin_url: '/tinymce/skins/lightgray',
    theme_url: '/tinymce/themes/modern/theme.min.js',
    external_plugins: {
      image: '/tinymce/plugins/image/plugin.min.js',
      link: '/tinymce/plugins/link/plugin.min.js',
      table: '/tinymce/plugins/table/plugin.min.js'
    menubar: false,
    toolbar1: 'bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link table image'

  didInsertElement: function() {
    var component = this;

    var options = _.assign(this.get('_options'), {
      setup: function(editor) {
        // bind change event
        editor.on('change', function() {

Step 4: Create the component template

<!-- app/templates/components/text-editor.hbs -->

{{textarea value=value}}

Step 5: Add the component to a template

<!-- app/templates/index.hbs -->

<div class="text-editor-wrapper">
    <h1>My text editor</h1>
    {{text-editor value=myBoundValue}}


Using this method (binding to TinyMCE's change event) only updates the binding when the actual text input is blurred. This means that it doesn't get updated when you type, which might be a dealbreaker for some. In my project that is fine, so I didn't bother to find a fix for this, but I assume that you can somehow bind to the keyup event and get real-time updating.

Copy link

Copy link

is this working in IE10 for you?

I'm getting a bunch of "failed to load"s in IE10.

Failed to load: http://localhost:4200/app-name//themes/modern/theme.js

For some reason, the destDir value of 'assets/tinymce from brocolli funnel isn't there

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment