Improved editor, selection example that gets removed

javascript/src/CommentController.js

@@ -109,9 +109,9 @@ var QfqNS = QfqNS || {};
     };
 
     n.CommentController.prototype.displayEditor = function() {
-        var $editor = $("<textarea />");
+        var editor = new n.Editor();
+        var $editor = editor.buildEditor();
         $editor.appendTo(this.$container);
-        this.updateHeight();
     };
 
     n.CommentController.prototype.getContainer = function() {

javascript/src/Editor.js

@@ -19,11 +19,12 @@ var QfqNS = QfqNS || {};
     'use strict';
 
     /**
-     * Manages a Text Editor for Comments
+     * Manages Text Editor for Comments
      *
      */
     n.Editor = function () {
         this.$container = {};
+        this.$textArea = {};
         this.text = "";
         // Event Emitter is a Library qfq uses to emit custom Events.
         this.eventEmitter = new EventEmitter();
@@ -31,7 +32,54 @@ var QfqNS = QfqNS || {};
 
     n.Editor.prototype.on = n.EventEmitter.onMixin;
 
-    n.Editor.prototype.buildEditor = function($hook) {
+    n.Editor.prototype.buildEditor = function() {
+        var that = this;
+        this.$container = $("<div />", {
+            class: "qfqEditorContainer"
+        });
+        this.$textArea = $("<div />", {
+            class: "qfqEditor",
+            contenteditable: true
+        });
+        var controls = $("<div />", {
+            class: "qfqEditorControls"
+        });
+        var submitButton = $("<button />", {
+            class: "btn btn-primary",
+            text: "Send"
+        });
+        submitButton.on("click", function() { that._handleClick();});
+        submitButton.appendTo(controls);
+        var testButton = $("<button />",{
+            class: "btn btn-info",
+            text: "Test"
+        });
+        testButton.on("click", function() { that._addHTML();});
+        testButton.appendTo(controls);
+        this.$textArea.appendTo(this.$container);
+        controls.appendTo(this.$container);
+        return this.$container;
+    };
+
+    n.Editor.prototype._handleClick = function() {
+        var text = this.$textArea.html();
+        console.log(text);
+    };
+
+    n.Editor.prototype._addHTML = function() {
+        if (window.getSelection) {
+            var selection = window.getSelection();
+            var selectionText = selection.focusNode.data.substring(selection.anchorOffset, selection.extentOffset);
+            console.log(selection);
+            console.log(selection.focusNode.length);
+            console.log(selectionText);
+            var node = selection.focusNode;
+            var start = selection.anchorOffset;
+            var length = selection.extentOffset - selection.anchorOffset;
+            var replacement = "<b>" + selectionText + "</b>";
+            node.data = node.data.Remove(start, length).node.data.Insert(start, replacement);
+            console.log(node.data);
+        }
 
     };
 

less/qfq-bs.css.less

@@ -530,6 +530,10 @@ i.@{spinner_class} {
   grid-column: 1;
   width: 100%;
   min-height: 100px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 8px;
 }
 
 .qfqEditorControls {

mockup/codeCorrection.html

@@ -36,12 +36,7 @@
         </div>
     </div>
 
-    <div class="qfqEditorContainer">
-        <textarea class="qfqEditor"></textarea>
-        <div class="qfqEditorControls">
-            <button class="btn btn-primary">Send</button>
-        </div>
-    </div>
+
 
     <div class="row">
         <div class="col-md-2"></div>