diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
index 3b43a05afd..989bd75127 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
@@ -428,6 +428,9 @@ define [
 					if rendererData?
 						rendererData.lineHeight = editor.renderer.lineHeight
 
+				scope.$on '$destroy', () ->
+					detachFromAce(scope.sharejsDoc)
+
 			template: """
 				<div class="ace-editor-wrapper">
 					<div
diff --git a/services/web/public/coffee/ide/editor/directives/cmEditor.coffee b/services/web/public/coffee/ide/editor/directives/cmEditor.coffee
new file mode 100644
index 0000000000..a0e475688b
--- /dev/null
+++ b/services/web/public/coffee/ide/editor/directives/cmEditor.coffee
@@ -0,0 +1,32 @@
+define [
+  "base"
+], (App) ->
+  App.directive "cmEditor", () ->
+    return {
+      scope: {
+        sharejsDoc: "="
+      }
+
+      link: (scope, element, attrs) ->
+        cm = Frontend.richText.init(element.find('.cm-editor-wrapper')[0])
+
+        scope.$watch "sharejsDoc", (sharejsDoc, oldSharejsDoc) ->
+          if oldSharejsDoc?
+            detachFromCM(oldSharejsDoc)
+          if sharejsDoc?
+            attachToCM(sharejsDoc)
+
+        attachToCM = (sharejsDoc) ->
+          cm.setValue(sharejsDoc.getSnapshot())
+          sharejsDoc.attachToCM(cm)
+
+        detachFromCM = (sharejsDoc) ->
+          sharejsDoc.detachFromCM()
+
+        scope.$on 'destroy', () ->
+          detachFromCM(scope.sharejsDoc)
+
+      template: """
+        <div class="cm-editor-wrapper"></div>
+      """
+    }
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 36084cd2a5..54fa3b97c1 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -75,8 +75,9 @@
 	top: 40px;
 }
 
-#editor {
+#editor, #editor-rich-text {
 	.full-size;
+	top: 40px; // TODO: replace with toolbar height var
 }
 
 .loading-screen {
@@ -190,6 +191,14 @@
 	}
 }
 
+.cm-editor-wrapper {
+	height: 100%;
+
+	.CodeMirror {
+		height: 100%;
+	}
+}
+
 // The internal components of the aceEditor directive
 .ace-editor-wrapper {
 	.full-size;