diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html
index 9f7196b6e4..6e3e17ee37 100644
--- a/cms/templates/widgets/html-edit.html
+++ b/cms/templates/widgets/html-edit.html
@@ -1,4 +1,4 @@
 <%include file="metadata-edit.html" />
 <section class="html-edit">
-  <textarea name="" class="edit-box" rows="8" cols="40">${data}</textarea>
+  <div name="" class="edit-box">${data}</div>
 </section>
diff --git a/common/lib/xmodule/jasmine_test_runner.html.erb b/common/lib/xmodule/jasmine_test_runner.html.erb
index edf4b43c2c..be5089f133 100644
--- a/common/lib/xmodule/jasmine_test_runner.html.erb
+++ b/common/lib/xmodule/jasmine_test_runner.html.erb
@@ -12,6 +12,7 @@
   <script type="text/javascript" src="<%= common_coffee_root %>/logger.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/jquery.min.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/jasmine-jquery.js"></script>
+  <script type="text/javascript" src="<%= common_js_root %>/vendor/CodeMirror/codemirror.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/mathjax-MathJax-c9db6ac/MathJax.js"></script>
 
   <script type="text/javascript">
diff --git a/common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html b/common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html
new file mode 100644
index 0000000000..1031ccff37
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html
@@ -0,0 +1,8 @@
+<section class="html-edit">
+    <div name="" class="edit-box" rows="8" cols="40">&lt;problem>
+&lt;p>&lt;/p>
+&lt;multiplechoiceresponse>
+<pre>&lt;problem>
+    &lt;p>&lt;/p></pre>
+<div><foo>bar</foo></div></div>
+</section>
\ No newline at end of file
diff --git a/common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee b/common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee
new file mode 100644
index 0000000000..428d6088fe
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee
@@ -0,0 +1,17 @@
+describe 'HTMLEditingDescriptor', ->
+  describe 'Read data from server, create Editor, and get data back out', ->
+    it 'Does not munge &lt', ->
+#     This is a test for Lighthouse #22,
+#     "html names are automatically converted to the symbols they describe"
+#     A better test would be a Selenium test to avoid duplicating the
+#     mako template structure in html-edit-formattingbug.html.
+#     However, we currently have no working Selenium tests.
+      loadFixtures 'html-edit-formattingbug.html'
+      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+      data = @descriptor.save().data
+      expect(data).toEqual("""&lt;problem&gt;
+                              &lt;p&gt;&lt;/p&gt;
+                              &lt;multiplechoiceresponse&gt;
+                              <pre>&lt;problem&gt;
+                                  &lt;p&gt;&lt;/p&gt;</pre>
+                              <div><foo>bar</foo></div>""")
\ No newline at end of file
diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
index e678a9b2eb..31f426fc59 100644
--- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee
+++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
@@ -1,11 +1,12 @@
 class @HTMLEditingDescriptor
   constructor: (@element) ->
-    @edit_box = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
+    text = $(".edit-box", @element)[0];
+    replace_func = (elt) -> text.parentNode.replaceChild(elt, text)
+    @edit_box = CodeMirror(replace_func, {
+      value: text.innerHTML
       mode: "text/html"
       lineNumbers: true
-      lineWrapping: true
-    })
+      lineWrapping: true})
 
   save: ->
     data: @edit_box.getValue()
-