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