Add in quill WYSIWYG

app/pods/components/text-editor/component.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+/* global Quill */
+
+export default Ember.Component.extend({
+  quill: null,
+  value: null, // passed in
+
+  didInsertElement: function() {
+    let quill = new Quill(`#${this.get('elementId')} .editor`, {
+      formats: ['bold', 'italic', 'underline'],
+      modules: {
+        'toolbar': { container: `#${this.get('elementId')} .toolbar` }
+      },
+      theme: 'snow'
+    });
+
+    let val = this.get('value');
+    if (!val) {
+      val = '';
+    }
+    quill.setHTML(val);
+
+    quill.on('text-change', (delta, source) => {
+      if (source === 'user') {
+        this.set('value', Ember.$(quill.getHTML()).html());
+      }
+    });
+
+    this.set('quill', quill);
+  },
+
+});

app/pods/components/text-editor/template.hbs

@@ -0,0 +1,11 @@
+<div class="ql-toolbar toolbar">
+  <span class="ql-format-group">
+    <span title="Bold" class="ql-format-button ql-bold"></span>
+    <span class="ql-format-separator"></span>
+    <span title="Italic" class="ql-format-button ql-italic"></span>
+    <span class="ql-format-separator"></span>
+    <span title="Underline" class="ql-format-button ql-underline"></span>
+  </span>
+</div>
+
+<div class="ql-editor editor"></div>