simple html editor added

cms/static/coffee/src/views/unit.coffee

@@ -94,6 +94,10 @@ class CMS.Views.UnitEdit extends Backbone.View
         @$editor = $($('#problem-editor').html())
         $preview = $($('#problem-preview').html())
         initProblemEditors(@$editor, $preview)
+      when 'html'
+        @$editor = $($('#html-editor').html())
+        $preview = $('<div class="html-preview">')
+        initHTMLEditor(@$editor, $preview)
 
     @$editor.find('.save-button, .cancel-button').bind('click', =>
       @$componentItem.removeClass('editing')

cms/static/js/html-editor.js

@@ -0,0 +1,26 @@
+var $body;
+var $htmlPreview;
+var $htmlEditor;
+var htmlEditor;
+
+function initHTMLEditor($editor, $prev) {
+  $htmlEditor = $editor;
+  console.log($editor.find('.edit-box'));
+  htmlEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
+    lineWrapping: true,
+    mode: 'xml',
+    lineNumbers: true,
+    onChange: onHTMLEditorUpdate
+  });
+
+  currentEditor = htmlEditor;
+
+  $(htmlEditor.getWrapperElement()).css('background', '#fff');
+
+  $(htmlEditor.getWrapperElement()).bind('click', setFocus);
+  $htmlPreview = $prev;
+}
+
+function onHTMLEditorUpdate(e) {
+  $htmlPreview.html(htmlEditor.getValue());
+}

cms/static/sass/_unit.scss

@@ -374,6 +374,10 @@
     }
   }
 
+  .html-preview {
+    padding: 20px 30px;
+  }
+
   .component-editor {
     @include edit-box;
     display: none;

cms/templates/unit.html

@@ -15,6 +15,7 @@
   </script>
 
   <script src="/static/js/speed-editor.js"></script>
+  <script src="/static/js/html-editor.js"></script>
 
   <script type="text/template" id="simple-editor-cheatsheet">
     <article class="simple-editor-cheatsheet">
@@ -143,6 +144,17 @@
     </section>
   </script>
 
+  <script type="text/template" id="html-editor">
+    <div class="html-editor editor">
+      <div class="row">
+        <textarea class="edit-box"></textarea>
+      </div>      
+      <div class="row">
+        <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+      </div>
+    </div>    
+  </script>
+
   <script type="text/template" id="video-editor">
     <div class="video-editor editor">
       <div class="row">
@@ -158,7 +170,7 @@
       <div class="row">
         <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
       </div>
-    </div>    
+    </div>
   </script>
 
   <script type="text/template" id="video-preview">