diff --git a/cms/static/coffee/src/views/module_edit.coffee b/cms/static/coffee/src/views/module_edit.coffee
index 1a68a00d4f..244d5b9576 100644
--- a/cms/static/coffee/src/views/module_edit.coffee
+++ b/cms/static/coffee/src/views/module_edit.coffee
@@ -113,14 +113,16 @@ class CMS.Views.ModuleEdit extends Backbone.View
     settingsModeButton = @$el.find('#settings-mode').find("a")
 
     if mode == @editorMode
-      dataEditor.addClass('is-active')
-      settingsEditor.removeClass('is-active')
+      # Because of CodeMirror editor, cannot hide the data editor when it is first loaded. Therefore
+      # we have to use a class of is-inactive instead of is-active.
+      dataEditor.removeClass('is-inactive')
       editorModeButton.addClass('is-set')
+      settingsEditor.removeClass('is-active')
       settingsModeButton.removeClass('is-set')
     else
-      dataEditor.removeClass('is-active')
-      settingsEditor.addClass('is-active')
+      dataEditor.addClass('is-inactive')
       editorModeButton.removeClass('is-set')
+      settingsEditor.addClass('is-active')
       settingsModeButton.addClass('is-set')
 
   hideDataEditor: =>
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 56c838f799..042a5dbdd6 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -535,12 +535,14 @@ body.course.unit {
 
 // Editor Wrapper
 .wrapper-comp-editor {
-  display: none;
+  display: block;
 
-  &.is-active {
-    display: block;
+  // Because the editor may be a CodeMirror editor (which must be visible at the time it is created
+  // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active".
+  &.is-inactive {
+    display: none;
   }
- }
+}
 
 // Settings Wrapper
 .wrapper-comp-settings {