Pretty much works.

cms/static/css/tiny-mce.css

+body {
+    background-color: #fff;
+    font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #3c3c3c;
+    scrollbar-3dlight-color: #F0F0EE;
+    scrollbar-arrow-color: #676662;
+    scrollbar-base-color: #F0F0EE;
+    scrollbar-darkshadow-color: #DDDDDD;
+    scrollbar-face-color: #E0E0DD;
+    scrollbar-highlight-color: #F0F0EE;
+    scrollbar-shadow-color: #F0F0EE;
+    scrollbar-track-color: #F5F5F5;
+}
+
+a {
+    color: #1d9dd9;
+    text-decoration: none;
+}
+
+p {
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+h2 {
+    color: #646464;
+    font-size: 19px;
+    font-weight: 300;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+}
+
+h3 {
+    font-size: 19px;
+    font-weight: 400;
+}
+
+code {
+    margin: 0 2px;
+    padding: 0px 5px;
+    border-radius: 3px;
+    border: 1px solid #eaeaea;
+    white-space: nowrap;
+    font-family: Monaco, monospace;
+    font-size: 14px;
+    background-color: #f8f8f8;
+}
\ No newline at end of file

cms/templates/widgets/html-edit.html

 <%include file="metadata-edit.html" />
 <section class="html-edit">
-    <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 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="advanced">Advanced</a></li>
+            </ul>
         </div>
+        <textarea class="tiny-mce">${data}</textarea>
+        <div name="" class="edit-box">${data}</div>
     </div>
 </section>

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

+// TODO: this code is a subset of what is in problem editor's CSS. Should share.
 .editor-bar {
   position: relative;
   @include linear-gradient(top, #d4dee8, #c9d5e2);
@@ -6,6 +7,8 @@
   border-radius: 3px 3px 0 0;
   border-bottom-color: #a5aaaf;
   @include clearfix;
+  // TODO: I added this -- Brian to fix roperly
+  height: 34px;
 
   a {
     display: block;

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

@@ -10,27 +10,69 @@ class @HTMLEditingDescriptor
       lineWrapping: true})
     $(@advanced_editor.getWrapperElement()).hide()
 
-    @tiny_mce = $(".tiny-mce", @element).tinymce({
+    @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",
-      #skin: 'studio',
-
-      # we may want to add "styleselect" when we collect all styles used throughout the lms
-      theme_advanced_buttons1 : "formatselect,bold,italic,underline,studio.asset,bullist,numlist,outdent,indent,blockquote,link,unlink",
+      schema: "html5",
+      # TODO: we should share this CSS with studio (and LMS)
+      content_css : "/static/css/tiny-mce.css",
+      # We may want to add "styleselect" when we collect all styles used throughout the LMS
+      theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,link,unlink",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "none",
       theme_advanced_resizing : true,
       theme_advanced_blockformats : "p,code,h2,h3,blockquote",
       width: '100%',
-      height: '400px'
+      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'))
+
+    @showingVisualEditor = true
+    @element.on('click', '.editor-tabs .tab', @onSwitchEditor)
+
+  onSwitchEditor: (e)=>
+    e.preventDefault();
+
+    if not $(e.currentTarget).hasClass('current')
+      $('.editor-tabs .current').removeClass('current')
+      $(e.currentTarget).addClass('current')
+      tinyMCE = @getVisualEditor()
+
+      if $(e.currentTarget).attr('data-tab') is 'visual'
+        $(@advanced_editor.getWrapperElement()).hide()
+        tinyMCE.show()
+        tinyMCE.setContent(@advanced_editor.getValue())
+        # In order for tinyMCE.isDirty() to return true ONLY if edits have been made after setting the text,
+        # both the startContent must be sync'ed up and the dirty flag set to false.
+        tinyMCE.startContent = tinyMCE.getContent({format: "raw", no_events: 1});
+        tinyMCE.isNotDirty = true
+        @showingVisualEditor = true
+      else
+        tinyMCE.hide()
+        @tiny_mce_textarea.hide()
+        $(@advanced_editor.getWrapperElement()).show()
+        if tinyMCE.isDirty()
+          console.log('was dirty! setting text')
+          @advanced_editor.setValue(tinyMCE.getContent({no_events: 1}))
+          @advanced_editor.setCursor(0)
+        @advanced_editor.refresh()
+        @advanced_editor.focus()
+        @showingVisualEditor = false
+
+  getVisualEditor: ->
+    ###
+    Returns the instance of TinyMCE.
+    This is different from the textarea that exists in the HTML template (@tiny_mce_textarea.
+    ###
+    return tinyMCE.get($('.tiny-mce', this.element).attr('id'))
 
   save: ->
-    data: @advanced_editor.getValue()
+    @element.off('click', '.editor-tabs .tab', @onSwitchEditor)
+    text = @advanced_editor.getValue()
+    tinyMCE = @getVisualEditor()
+    if @showingVisualEditor and tinyMCE.isDirty()
+      console.log('persist from visual editor')
+      text = tinyMCE.getContent({no_events: 1})
+    else
+      console.log('persist from HTML editor')
+    data: text

common/lib/xmodule/xmodule/templates/html/empty.yaml

+---
+metadata:
+      display_name: Empty
+
+data: |
+
+children: []
\ No newline at end of file