# Integrating TinyMCE in an ember-cli app

[TinyMCE](http://tinymce.com) 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. 

```javascript
// 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

```javascript
// app/components/text-editor.js

import Ember from 'ember';

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 = this.get('_options')
    
    Ember.merge(options, {
      setup: function(editor) {
        // bind change event
        component.set('editor', editor);
        editor.on('change', function() {
          component.set('value',
             editor.getContent());
        });
      }
    });
    
    this.$('textarea').tinymce(options);
  }.on('didInsertElement'),
  
  valueChanged: function () {
    var controller = this;
    tinymce.editors.filter(function (editor) {
      return editor.id === controller.get('editor').id;
    }).forEach(function (editor) {
      editor.setContent(controller.get('value'));
    });
  }.observes('value')
});
```

**Step 4**: Create the component template

```html

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

{{textarea value=value}}
```

**Step 5**: Add the component to a template

```html

<!-- 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.