Integrated codemirror in QfqForm. Added minimal styling.

javascript/src/QfqForm.js

@@ -90,6 +90,7 @@ var QfqNS = QfqNS || {};
         // Deprecated
         //n.Helper.jqxEditor();
         n.Helper.tinyMce();
+        n.Helper.codemirror();
         this.form.on('form.submit.before', n.Helper.tinyMce.prepareSave);
         this.form.on('form.validation.before', n.Helper.tinyMce.prepareSave);
         this.form.on('form.validation.failed', this.validationError);

less/qfq-bs.css.less

@@ -2,6 +2,7 @@
 
 @alert_container_id : #qfqAlertContainer;
 @spinner_class : spinner;
+@CodeMirror_border_color: #ccc;
 
 @{alert_container_id} {
   position: fixed;
@@ -193,4 +194,9 @@ i.@{spinner_class} {
 //
 //.text-note {
 //  padding-top: 7px;
-//}
\ No newline at end of file
+//}
+
+.CodeMirror {
+  border: 1px solid @CodeMirror_border_color;
+  border-radius: 4px;
+}
\ No newline at end of file

mockup/codemirror.html

@@ -61,8 +61,7 @@
 
             <div class="col-md-6">
                 <textarea id="text" class="qfq-codemirror" name="codemirror"
-                          data-config='{ "mode": "text/x-sql", "lineNumbers": true }'>
-                </textarea>
+                          data-config='{ "mode": "text/x-sql", "lineNumbers": true }'></textarea>
             </div>
         </div>
 
@@ -85,8 +84,6 @@
         var qfqPage = new QfqNS.QfqPage({
             formId: "myForm"
         });
-
-        QfqNS.Helper.codemirror();
         QfqNS.Log.level = 0;
     });
 </script>