Integrating TinyMCE in an ember-cli app

gistfile1.md

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() {
          component.set('value',
             editor.getContent());
        });
      }
    });
    
    this.$('textarea').tinymce(options);
  }.on('didInsertElement'),
});

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}}
</div>

Caveat

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.

Update to remove lodash as a dependency: https://gist.github.com/koriroys/dc53d8d7034512a995bc/6f254b373bd88c675cf07abaca9f4dd483e6fca5

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