Saving work.

cms/templates/widgets/html-edit.html

 <%include file="metadata-edit.html" />
 <section class="html-edit">
-  <textarea name="" class="tiny-mce"></textarea>
-  <div name="" class="edit-box">${data}</div>
+    <div class="html-editor editor">
+        <div class="row">
+            <div class="editor-bar">
+                <ul class="editor-tabs">
+                    <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
+                    <li><a href="#" class="html-tab tab" data-tab="html">Advanced</a></li>
+                </ul>
+            </div>
+            <textarea class="tiny-mce">${data}</textarea>
+            <div name="" class="edit-box">${data}</div>
+        </div>
+    </div>
 </section>

common/lib/xmodule/xmodule/css/html/edit.scss

+.editor-bar {
+  position: relative;
+  @include linear-gradient(top, #d4dee8, #c9d5e2);
+  padding: 5px;
+  border: 1px solid #3c3c3c;
+  border-radius: 3px 3px 0 0;
+  border-bottom-color: #a5aaaf;
+  @include clearfix;
+
+  a {
+    display: block;
+    float: left;
+    padding: 3px 10px 7px;
+    margin-left: 7px;
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(255, 255, 255, .5);
+    }
+  }
+
+  .editor-tabs {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    li {
+      float: left;
+    }
+
+    .tab {
+      height: 24px;
+      padding: 7px 20px 3px;
+      border: 1px solid #a5aaaf;
+      border-radius: 3px 3px 0 0;
+      @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
+      background-color: #e5ecf3;
+      font-size: 13px;
+      color: #3c3c3c;
+      box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
+
+      &.current {
+        background: #fff;
+        border-bottom-color: #fff;
+      }
+    }
+  }
+}
+

common/lib/xmodule/xmodule/html_module.py

@@ -48,6 +48,7 @@ class HtmlDescriptor(XmlDescriptor, EditingDescriptor):
 
     js = {'coffee': [resource_string(__name__, 'js/src/html/edit.coffee')]}
     js_module_name = "HTMLEditingDescriptor"
+    css = {'scss': [resource_string(__name__, 'css/html/edit.scss')]}
 
     # VS[compat] TODO (cpennington): Delete this method once all fall 2012 course
     # are being edited in the cms

common/lib/xmodule/xmodule/js/src/html/edit.coffee

 class @HTMLEditingDescriptor
-  constructor: (@element) ->
+  constructor: (element) ->
+    @element = element;
     text = $(".edit-box", @element)[0];
     replace_func = (elt) -> text.parentNode.replaceChild(elt, text)
-    @edit_box = CodeMirror(replace_func, {
+    @advanced_editor = CodeMirror(replace_func, {
       value: text.innerHTML
       mode: "text/html"
       lineNumbers: true
       lineWrapping: true})
-    @tiny_mce = $(".tiny-mce").tinymce({
+    $(@advanced_editor.getWrapperElement()).hide()
+
+    @tiny_mce = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",
       #skin: 'studio',
@@ -21,7 +24,13 @@ class @HTMLEditingDescriptor
       theme_advanced_blockformats : "p,code,h2,h3,blockquote",
       width: '100%',
       height: '400px'
-    });
+    })
+#    @tiny_mce.focus()
+#    /tinyMCE.activeEditor.setContent(text, {format : 'raw'});
+#    @tiny = tinyMCE.get($('.tiny-mce', this.element).attr('id'))
+#    @tiny.setContent(@edit_box.getValue(), {format : 'raw'});
+#    @tiny_mce.html(@edit_box.getValue())
+    @visual_editor = tinyMCE.get($('.tiny-mce', this.element).attr('id'))
 
   save: ->
-    data: @edit_box.getValue()
+    data: @advanced_editor.getValue()

common/templates/courseware_vendor_js.html

@@ -12,6 +12,7 @@
 <script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>
 
 ## tiny_mce
+<script type="text/javascript" src="${static.url('js/vendor/tiny_mce/tiny_mce.js')}"></script>
 <script type="text/javascript" src="${static.url('js/vendor/tiny_mce/jquery.tinymce.js')}"></script>
 
 <%include file="mathjax_include.html" />