Use postMessage to communicate between the iframe and TinyMCE.

This gets around cross-origin issues on the CDN.

Delete plugin.min.js as the Jake command will minimize into the full file.

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

@@ -63,8 +63,8 @@ class @HTMLEditingDescriptor
     ed.on('EditImage', @editImage)
     ed.on('SaveLink', @saveLink)
     ed.on('EditLink', @editLink)
-    ed.on('ShowCodeMirror', @showCodeEditor)
-    ed.on('SaveCodeMirror', @saveCodeEditor)
+    ed.on('ShowCodeEditor', @showCodeEditor)
+    ed.on('SaveCodeEditor', @saveCodeEditor)
 
   editImage: (data) =>
     # Called when the image plugin will be shown. Input arg is the JSON version of the image data.
@@ -86,17 +86,17 @@ class @HTMLEditingDescriptor
     if data['href']
       data['href'] = rewriteStaticLinks(data['href'], '/static/', @base_asset_url)
 
-  showCodeEditor: (codeEditor) =>
+  showCodeEditor: (source) =>
     # Called when the CodeMirror Editor is displayed to convert links to show static prefix.
-    # The input argument is the CodeMirror instance.
-    content = rewriteStaticLinks(codeEditor.getValue(), @base_asset_url, '/static/')
-    codeEditor.setValue(content)
+    # The input argument is a dict with the text content.
+    content = rewriteStaticLinks(source.content, @base_asset_url, '/static/')
+    source.content = content
 
-  saveCodeEditor: (codeEditor) =>
+  saveCodeEditor: (source) =>
     # Called when the CodeMirror Editor is saved to convert links back to the full form.
-    # The input argument is the CodeMirror instance.
-    content = rewriteStaticLinks(codeEditor.getValue(), '/static/', @base_asset_url)
-    codeEditor.setValue(content)
+    # The input argument is a dict with the text content.
+    content = rewriteStaticLinks(source.content, '/static/', @base_asset_url)
+    source.content = content
 
   initInstanceCallback: (visualEditor) =>
     visualEditor.setContent(rewriteStaticLinks(visualEditor.getContent({no_events: 1}), '/static/', @base_asset_url))

common/static/js/vendor/tiny_mce/plugins/codemirror/plugin.js

@@ -18,25 +18,115 @@ tinymce.PluginManager.add('codemirror', function(editor, url) {
 		editor.selection.collapse(true);
 		editor.selection.setContent('<span class="CmCaReT" style="display:none">&#0;</span>');
 
+        // Determine the origin of the window that will host the code editor.
+        // If tinyMCE's baseURL is relative, then static files are hosted in the
+        // same origin as the containing page. If it is not relative, then we know that
+        // the origin of the iframe hosting the code editor will match the origin
+        // of tinyMCE's baseURL, as they are both hosted on the CDN.
+        var codeEditorOrigin;
+        var index = tinyMCE.baseURL.indexOf("/static/");
+        if (index > 0) {
+            codeEditorOrigin = tinyMCE.baseURL.substring(0, index);
+        }
+        else {
+            codeEditorOrigin = window.location.origin;
+        }
+
+        // Send the path location for CodeMirror and the parent origin to use in postMessage.
+        var sourceHtmlParams = "?CodeMirrorPath=" + editor.settings.codemirror.path +
+            "&ParentOrigin=" + window.location.origin;
+
 		// Open editor window
 		var win = editor.windowManager.open({
 			title: 'HTML source code',
-			url: url + '/source.html',
+            url: url + '/source.html' + sourceHtmlParams,
             width: 800,
             height: 550,
-			resizable : true,
-			maximizable : true,
+            resizable: true,
+            maximizable: true,
             buttons: [
-				{ text: 'Ok', subtype: 'primary', onclick: function(){
-					var doc = document.querySelectorAll('.mce-container-body>iframe')[0];
-					doc.contentWindow.submit();
-					win.close();
+                { text: 'OK', subtype: 'primary', onclick: function () {
+                    postToCodeEditor({type: "save"});
                 }},
-				{ text: 'Cancel', onclick: 'close' }
+                { text: 'Cancel', onclick: function () {
+                    postToCodeEditor({type: "cancel"});
+                }}
             ]
+
         });
+
+        // The master version of TinyMCE has a win.getContentWindow() method. This is its implementation.
+        var codeWindow = win.getEl().getElementsByTagName('iframe')[0].contentWindow;
+
+        var postToCodeEditor = function (data) {
+            codeWindow.postMessage(data, codeEditorOrigin);
         };
 
+        var messageListener = function (event) {
+            // Check that the message came from the code editor.
+            if (codeEditorOrigin !== event.origin) {
+                return;
+            }
+
+            var source;
+            if (event.data.type === "init") {
+                source = {content: editor.getContent({source_view: true})};
+                // Post an event to allow rewriting of static links on the content.
+                editor.fire("ShowCodeEditor", source);
+
+                postToCodeEditor(
+                    {
+                        type: "init",
+                        content: source.content
+                    }
+                );
+                editor.dom.remove(editor.dom.select('.CmCaReT'));
+            }
+            else if (event.data.type === "setText") {
+                source = {content: event.data.text};
+                var isDirty = event.data.isDirty;
+
+                // Post an event to allow rewriting of static links on the content.
+                editor.fire('SaveCodeEditor', source);
+
+                editor.setContent(source.content);
+
+                // Set cursor:
+                var el = editor.dom.select('span#CmCaReT')[0];
+                if (el) {
+                    editor.selection.scrollIntoView(el);
+                    editor.selection.setCursorLocation(el,0);
+                    editor.dom.remove(el);
+                }
+                // EDX: added because CmCaReT span was getting left in when caret was within a style tag.
+                // Make sure to strip it out (and accept that caret will not be in the correct place).
+                else {
+                    var content = editor.getContent();
+                    var strippedContent = content.replace('<span id="CmCaReT"></span>', '');
+                    if (content !== strippedContent) {
+                        editor.setContent(strippedContent);
+                    }
+                }
+
+                // EDX: moved block of code from original location since we may change content in bug fix code above.
+                editor.isNotDirty = !isDirty;
+                if (isDirty) {
+                    editor.nodeChanged();
+                }
+            }
+            else if (event.data.type === "closeWindow") {
+                win.close();
+            }
+        };
+
+        win.on("close", function() {
+            window.removeEventListener("message", messageListener);
+        });
+
+        window.addEventListener("message", messageListener, false);
+
+	}
+
 	// Add a button to the button bar
     // EDX changed to show "HTML" on toolbar button
 	editor.addButton('code', {

common/static/js/vendor/tiny_mce/plugins/codemirror/plugin.min.js

-tinymce.PluginManager.requireLangPack("codemirror");
-tinymce.PluginManager.add("codemirror",function(a,c){function b(){a.focus();a.selection.collapse(!0);a.selection.setContent('<span class="CmCaReT" style="display:none">&#0;</span>');var b=a.windowManager.open({title:"HTML source code",url:c+"/source.html",width:800,height:550,resizable:!0,maximizable:!0,buttons:[{text:"Ok",subtype:"primary",onclick:function(){document.querySelectorAll(".mce-container-body>iframe")[0].contentWindow.submit();b.close()}},{text:"Cancel",onclick:"close"}]})}a.addButton("code",
-{title:"Edit HTML",text:"HTML",icon:false,onclick:b});a.addMenuItem("code",{icon:"code",text:"Edit HTML",context:"tools",onclick:b})});

common/static/js/vendor/tiny_mce/plugins/codemirror/source.html

 <!DOCTYPE html>
 <html>
 <head>
+<!--Necessary to set encoding when running on CloudFront CDN. -->
+<meta charset="UTF-8">
 <script>
 
 /**
@@ -11,30 +13,65 @@
  */
 
 // Global vars:
-var tinymce,     // Reference to TinyMCE
-	editor,      // Reference to TinyMCE editor
-	codemirror,  // CodeMirror instance
+var codemirror,  // CodeMirror instance
         chr = 0,     // Unused utf-8 character, placeholder for cursor
         isMac = /macintosh|mac os/i.test(navigator.userAgent),
-	CMsettings;  // CodeMirror settings
+        CMsettings,  // CodeMirror settings
+        messageHandler,
+        parentOrigin,
+        postToParent;
 
-function inArray(key, arr)
-{
+messageHandler = function (event) {
+    if (event.origin !== parentOrigin) {
+        return;
+    }
+
+    var cleanup = function () {
+        window.removeEventListener("message", messageHandler);
+        postToParent({type: "closeWindow"});
+    };
+    if (event.data.type === "init") {
+        start(event.data.content);
+    }
+    else if (event.data.type == "save") {
+        submit();
+        cleanup();
+    }
+    else if (event.data.type == "cancel") {
+        cleanup();
+    }
+};
+
+postToParent = function(data) {
+    parent.postMessage(data, parentOrigin);
+};
+
+window.addEventListener("message", messageHandler);
+
+function inArray(key, arr) {
     "use strict";
     arr = '|' + arr.join('|') + '|';
-	return arr.indexOf('|'+key+'|') != -1;
+    return arr.indexOf('|' + key + '|') != -1;
 }
 
-(function()
-{// Initialise (before load)
+(function () { // Initialise (before load)
     "use strict";
 
-	tinymce = parent.tinymce;
-	editor = tinymce.activeEditor;
-	var i, userSettings = editor.settings.codemirror ? editor.settings.codemirror : null;
+    var getParamByName = function (name) {
+        var match = new RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
+        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+    };
+
+    // Getting this as a query parameter is very ugly, but the JS and CSS needs
+    // to be added to the head as the page is being rendered. Therefore it isn't possible
+    // to use postMessage APIs to get the setting value. And we can't hardcode the value in here
+    // because we need the baseURL, which is only added to server-side templated files.
+    var codemirrorPath = getParamByName("CodeMirrorPath");
+    parentOrigin = getParamByName("ParentOrigin");
+
     CMsettings = {
-		path: userSettings.path || 'CodeMirror',
-		indentOnInit: userSettings.indentOnInit || false,
+        path: codemirrorPath,
+        indentOnInit: false,
         config: {// Default config
             mode: 'htmlmixed',
             lineNumbers: true,
@@ -63,45 +100,28 @@ function inArray(key, arr)
         ]
     };
 
-	// Merge config
-	for (i in userSettings.config) {
-		CMsettings.config[i] = userSettings.config[i];
-	}
-	
-	// Merge jsFiles
-	for (i in userSettings.jsFiles) {
-		if (!inArray(userSettings.jsFiles[i], CMsettings.jsFiles)) {
-			CMsettings.jsFiles.push(userSettings.jsFiles[i]);
-		}
-	}
-
-	// Merge cssFiles
-	for (i in userSettings.cssFiles) {
-		if (!inArray(userSettings.cssFiles[i], CMsettings.cssFiles)) {
-			CMsettings.cssFiles.push(userSettings.cssFiles[i]);
-		}
-	}
-
     // Add trailing slash to path
     if (!/\/$/.test(CMsettings.path)) {
         CMsettings.path += '/';
     }
 
     // Write stylesheets
-	for (i = 0; i < CMsettings.cssFiles.length; i++) {
-		document.write('<li'+'nk rel="stylesheet" type="text/css" href="' + CMsettings.path + CMsettings.cssFiles[i] + '" />');
+    for (var i = 0; i < CMsettings.cssFiles.length; i++) {
+        document.write('<li' + 'nk rel="stylesheet" type="text/css" href="' + CMsettings.path + CMsettings.cssFiles[i] + '" />');
     }
 
     // Write JS source files
-	for (i = 0; i < CMsettings.jsFiles.length; i++) {
-		document.write('<scr'+'ipt type="text/javascript" src="' + CMsettings.path + CMsettings.jsFiles[i] + '"></scr'+'ipt>');
+    for (var j = 0; j < CMsettings.jsFiles.length; j++) {
+        document.write('<scr' + 'ipt type="text/javascript" src="' + CMsettings.path + CMsettings.jsFiles[j] + '"></scr' + 'ipt>');
     }
 
-	window.onload = start;
+    window.onload = function () {
+        postToParent({type: "init"});
+    };
+
 }());
 
-function start()
-{// Initialise (on load)
+function start(html) {// Initialise (on load)
     "use strict";
 
     if (typeof(window.CodeMirror) !== 'function') {
@@ -121,14 +141,9 @@ function start()
 //	head.appendChild(div);
 
     // Set CodeMirror cursor to same position as cursor was in TinyMCE:
-	var html = editor.getContent({source_view: true});
     html = html.replace(/<span\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr));
-	editor.dom.remove(editor.dom.select('.CmCaReT'));
 
-	CodeMirror.defineInitHook(function(inst) 
-	{
-        // EDX: added to switch static links.
-        editor.fire("ShowCodeMirror", inst);
+    CodeMirror.defineInitHook(function (inst) {
 
         // Move cursor to correct position:
         inst.focus();
@@ -139,9 +154,9 @@ function start()
         }
 
         // Indent all code, if so requested:
-		if (editor.settings.codemirror.indentOnInit) {
+        if (CMsettings.indentOnInit) {
             var last = inst.lineCount();
-			inst.operation(function() {
+            inst.operation(function () {
                 for (var i = 0; i < last; ++i) {
                     inst.indentLine(i);
                 }
@@ -154,28 +169,30 @@ function start()
     // Instantiante CodeMirror:
     codemirror = CodeMirror(document.body, CMsettings.config);
     codemirror.isDirty = false;
-	codemirror.on('change', function(inst) {
+    codemirror.on('change', function (inst) {
         inst.isDirty = true;
     });
 }
 
-function findDepth(haystack, needle)
-{
+function findDepth(haystack, needle) {
     "use strict";
 
     var idx = haystack.indexOf(needle), depth = 0, x;
     for (x = idx; x >= 0; x--) {
-		switch(haystack.charAt(x)) {
-			case '<': depth--; break;
-			case '>': depth++; break;
+        switch (haystack.charAt(x)) {
+            case '<':
+                depth--;
+                break;
+            case '>':
+                depth++;
+                break;
         }
     }
     return depth;
 }
 
 // This function is called by plugin.js, when user clicks 'Ok' button
-function submit()
-{
+function submit() {
     "use strict";
 
     var cc = '&#x0;', isDirty = codemirror.isDirty, doc = codemirror.doc;
@@ -197,54 +214,31 @@ function submit()
         doc.setLine(pos.line, curLineHTML);
     }
 
-	// Submit HTML to TinyMCE:
-
-    // EDX: added to switch static links.
-    editor.fire('SaveCodeMirror', codemirror);
-
-	editor.setContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
-
-	// Set cursor:
-	var el = editor.dom.select('span#CmCaReT')[0];
-	if (el) {
-		editor.selection.scrollIntoView(el);
-		editor.selection.setCursorLocation(el,0);
-		editor.dom.remove(el);
-	}
-    // EDX: added because CmCaReT span was getting left in when caret was within a style tag.
-    // Make sure to strip it out (and accept that caret will not be in the correct place).
-    else {
-        var content = editor.getContent();
-        var strippedContent = content.replace('<span id="CmCaReT"></span>', '');
-        if (content !== strippedContent) {
-            editor.setContent(strippedContent);
-        }
-    }
-
-    // EDX: moved block of code from original location since we may change content in bug fix code above.
-    editor.isNotDirty = !isDirty;
-	if (isDirty) {
-		editor.nodeChanged();
+    postToParent(
+            {
+                type: "setText",
+                text: codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'),
+                isDirty: isDirty
             }
-
+    );
 }
 
 </script>
 <style type="text/css">
 
-body {
+    body {
         margin: 0;
-}
+    }
 
-.CodeMirror {
+    .CodeMirror {
         height: 100%;
         font-size: 12px;
         line-height: 18px;
-}
+    }
 
-.CodeMirror-activeline-background {
+    .CodeMirror-activeline-background {
         background: #e8f2ff !important;
-}
+    }
 
 </style>
 </head>