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>

app/styles/app.css

@@ -1,3 +1,7 @@
+.ql-editor {
+  font-size: 18px;
+}
+
 .overflow-div {
   white-space: nowrap;
   overflow: auto;

bower.json

@@ -18,6 +18,7 @@
     "select2": "3.5.2",
     "antiscroll": "git://github.com/azirbel/antiscroll.git#90391fb371c7be769bc32e7287c5271981428356",
     "jquery-mousewheel": "~3.1.4",
-    "jquery-ui": "~1.11.4"
+    "jquery-ui": "~1.11.4",
+    "quill": "~0.19.14"
   }
 }

config/environment.js

@@ -32,7 +32,7 @@ module.exports = function(environment) {
       'default-src': "'none'",
       'script-src': "'self'",
       'font-src': "'self'",
-      'img-src': "'self'",
+      'img-src': "'self' data:",
       'style-src': "'self' 'unsafe-inline'",
       'media-src': "'self'"
     },

ember-cli-build.js

@@ -10,6 +10,9 @@ module.exports = function(defaults) {
   // flakes (and deps)
   app.import('bower_components/flakes/css/all.css');
   app.import('bower_components/gridforms/gridforms/gridforms.css');
+  // quill
+  app.import('bower_components/quill/dist/quill.base.css');
+  app.import('bower_components/quill/dist/quill.snow.css');
 
   // LIBS ////////////////////////////////////////////////////////////////////////
   // flakes (and deps)
@@ -19,6 +22,8 @@ module.exports = function(defaults) {
   app.import('bower_components/flakes/js/base.js');
   // moment
   app.import('bower_components/moment/moment.js');
+  // quill
+  app.import('bower_components/quill/dist/quill.min.js');
 
   return app.toTree();
 };