Warn users if the visual editor will modify their code, and offer to switch to the raw editor.

cms/djangoapps/contentstore/features/html-editor.feature

@@ -34,17 +34,15 @@ Feature: CMS.HTML Editor
     Then the href link is rewritten to "c4x/MITx/999/asset/image.jpg"
     And the link is shown as "/static/image.jpg" in the Link Plugin
 
-  Scenario: TinyMCE and CodeMirror preserve style tags
+  Scenario: TinyMCE and CodeMirror strip style tags
     Given I have created a Blank HTML Page
     When I edit the page
     And type "<p class='title'>pages</p><style><!-- .title { color: red; } --></style>" in the code editor and press OK
     And I save the page
     Then the page text contains:
       """
-      <p class="title">pages</p>
-      <style><!--
-      .title { color: red; }
-      --></style>
+<p></p>
+<p>pages</p>
       """
 
   Scenario: TinyMCE and CodeMirror preserve span tags
@@ -118,15 +116,24 @@ Feature: CMS.HTML Editor
 #      fancy html
 #      """
 
-# Skipping in master due to brittleness JZ 05/22/2014
-#  Scenario: Can switch from Raw Editor to Visual
-#    Given I have created a raw HTML component
-#    And I edit the component and select the Visual Editor
-#    And I save the page
-#    When I edit the page
-#    And type "less fancy html" in the code editor and press OK
-#    And I save the page
-#    Then the page text contains:
-#      """
-#      less fancy html
-#      """
+=======
+  Scenario: Can switch from Raw Editor to Visual
+    Given I have created a raw HTML component
+    And I edit the component and select the Visual Editor
+    And I save the page
+    When I edit the page
+    And type "less fancy html" in the code editor and press OK
+    And I save the page
+    Then the page text contains:
+      """
+      less fancy html
+      """
+
+  Scenario: Visual Editor warns when data will be lost
+    Given I have created a raw HTML component
+    When I edit the page
+    And type "<div class='notallowed'>hello</div>" into the Raw Editor
+    And select the Visual Editor
+    And I save the page
+    When I edit the page
+>>>>>>> Add test for html editor warning.

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

@@ -4,6 +4,7 @@ class @HTMLEditingDescriptor
     @element = element
     @base_asset_url = @element.find("#editor-tab").data('base-asset-url')
     @editor_choice = @element.find("#editor-tab").data('editor')
+
     if @base_asset_url == undefined
       @base_asset_url = null
 
@@ -62,17 +63,15 @@ class @HTMLEditingDescriptor
 
         # Necessary to avoid stripping of style tags.
         valid_children : "+body[style]",
-
-        # Allow any elements to be used, e.g. link, script, math
-        valid_elements: "*[*]",
-        extended_valid_elements: "*[*]",
-        invalid_elements: "",
-
+        valid_elements: "h1,h2,h3,h4,p[id|style|class],div[id|style|class],span[id|style],section[id|style|class],img[src|style|alt|width|height],br,hr,a[*],strong/b,cite,mark,address,i/em,code,ul,ol,li,blockquote"
+        extended_valid_elements: "link,math,maction,maligngroup,malingmark,menclose,merror,mfenced,mfrac,mglyph,mi,mlabeldtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mroot,mrow,ms,mscarries,mscarry,msgroup,mstack,msline,mspace,msqrt,msrow,mstyle,msub,msup,msubsup,mtable,mtd,mtext,mtr,munder,munderover"        
+        invalid_elements: "script,style",
         setup: @setupTinyMCE,
         # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
         # The tinyMCE callback passes in the editor as a parameter.
         init_instance_callback: @initInstanceCallback
       })
+      @confirmVisualEditor()
 
   setupTinyMCE: (ed) =>
     ed.addButton('wrapAsCode', {
@@ -132,6 +131,38 @@ class @HTMLEditingDescriptor
     @starting_content = visualEditor.getContent({format:"raw", no_events: 1})
     visualEditor.focus()
 
+  confirmVisualEditor: () =>
+    # warn the user if the visual editor will probably alter their markup
+    if @editor_choice == 'visual'
+      raw_content = @advanced_editor.getValue()
+      if raw_content != ''
+        schema = @getVisualEditor().schema
+        should_warn = false
+        walk = (node) ->
+          if not node
+            return
+          if node.nodeType == 1
+            tagname = node.tagName.toLowerCase()
+            if not schema.isValid(tagname)
+              should_warn = true
+              return
+            else
+              for attr in node.attributes
+                if not schema.isValid(tagname, attr.name)
+                  should_warn = true
+                  return
+            for child in node.childNodes
+              walk child
+        root = document.createElement('div')
+        root.innerHTML = raw_content
+        walk root
+
+        if should_warn
+          if not confirm gettext("Visual editing may cause data loss. Click cancel for raw editor.")
+            @editor_choice = "raw"
+            @element.find('.tiny-mce').remove()
+            @$advancedEditorWrapper.removeClass('is-inactive')
+
   getVisualEditor: () ->
     ###
     Returns the instance of TinyMCE.
@@ -151,4 +182,4 @@ class @HTMLEditingDescriptor
     if text == undefined
       text = @advanced_editor.getValue()
 
-    data: text
+    return {data: text, metadata: {editor: @editor_choice}}