[common] Add id for monaco editor instance

apps/common/main/lib/component/MonacoEditor.js

@@ -40,6 +40,7 @@ define([], function () {
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
+            this.id = _.uniqueId();
             this.parentEl = options.parentEl;
             this.language = options.language || 'javascript';
             this.parentEl && this.render(this.parentEl);
@@ -63,6 +64,7 @@ define([], function () {
             var src = '../../../vendor/monaco/MonacoEditor.html';
             src += '?editorType=' + (window.SSE ? 'cell' : window.PE ? 'slide' : 'word');
             src += '&language=' + this.language;
+            src += '&id=' + this.id;
 
             this.iframe.src = src;
 
@@ -96,6 +98,7 @@ define([], function () {
 
         _postMessage: function(wnd, msg) {
             if (wnd && wnd.postMessage && window.JSON) {
+                msg.referer = 'monaco-editor-' + this.id;
                 wnd.postMessage(window.JSON.stringify(msg), "*");
             }
         },
@@ -113,7 +116,7 @@ define([], function () {
                 cmd = '';
             }
 
-            if (cmd && cmd.referer == "monaco-editor") {
+            if (cmd && cmd.referer == 'monaco-editor-' + this.id) {
                 switch (cmd.command) {
                     case 'changeValue':
                         data = cmd.data || {};
@@ -135,7 +138,6 @@ define([], function () {
         setValue: function(value, currentPos, readonly) {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'setValue',
-                referer: 'monaco-editor',
                 data: {
                     value: value,
                     readonly: readonly,
@@ -147,7 +149,6 @@ define([], function () {
         updateTheme: function() {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'setTheme',
-                referer: 'monaco-editor',
                 data: Common.UI.Themes.getThemeColors()
             });
         },
@@ -155,7 +156,6 @@ define([], function () {
         disableDrop: function(disable) {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'disableDrop',
-                referer: 'monaco-editor',
                 data: disable
             });
         },
@@ -163,7 +163,6 @@ define([], function () {
         revealPositionInCenter: function() {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'revealPositionInCenter',
-                referer: 'monaco-editor',
                 data: {}
             });
         },
@@ -171,7 +170,6 @@ define([], function () {
         undo: function() {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'undo',
-                referer: 'monaco-editor',
                 data: {}
             });
         },
@@ -179,7 +177,6 @@ define([], function () {
         redo: function() {
             this._postMessage(this.iframe.contentWindow, {
                 command: 'redo',
-                referer: 'monaco-editor',
                 data: {}
             });
         },

vendor/monaco/MonacoEditor.html

@@ -37,6 +37,7 @@
         window.editorType = params["editorType"]; // word/cell/slide
         window.editorTheme = params["editorTheme"]; // dark/light
         window.language = params["language"]; //javascript/vba
+        window.id = params["id"];
     </script>
     <script src="./MonacoEditorCode.js"></script>
 </body>

vendor/monaco/MonacoEditor.js

@@ -14,13 +14,13 @@
     window.MonacoEditorWrapper = function(placeholderId, config) {
         var _self = this,
             _config = config || {},
+            _id = Math.random().toString(16).slice(2),
             parentEl = document.getElementById(placeholderId),
             iframe;
 
         var _setValue = function(value, currentPos, readonly) {
-            _postMessage(iframe.contentWindow, {
+            _postMessage(iframe.contentWindow, _id, {
                 command: 'setValue',
-                referer: 'monaco-editor',
                 data: {
                     value: value,
                     currentPos: currentPos
@@ -29,9 +29,8 @@
         };
 
         var _updateTheme = function(type) {
-            _postMessage(iframe.contentWindow, {
+            _postMessage(iframe.contentWindow, _id, {
                 command: 'setTheme',
-                referer: 'monaco-editor',
                 data: {
                     type: type
                 }
@@ -39,9 +38,8 @@
         };
 
         var _disableDrop = function(disable) {
-            _postMessage(iframe.contentWindow, {
+            _postMessage(iframe.contentWindow, _id, {
                 command: 'disableDrop',
-                referer: 'monaco-editor',
                 data: disable
             });
         };
@@ -66,7 +64,7 @@
                 cmd = '';
             }
 
-            if (cmd && cmd.referer == "monaco-editor") {
+            if (cmd && cmd.referer == "monaco-editor-" + _id) {
                 var events = _config.events || {},
                     handler;
                 data = {};
@@ -97,7 +95,7 @@
         };
 
         if (parentEl) {
-            iframe = createIframe(_config);
+            iframe = createIframe(_id, _config);
             iframe.onload = _onLoad;
             var _msgDispatcher = new MessageDispatcher(_onMessage, this);
             parentEl.appendChild(iframe);
@@ -125,22 +123,27 @@
         return "";
     }
 
-    function createIframe(config) {
+    function createIframe(id, config) {
+        var params = [];
+        config.editorType && params.push('editorType=' + config.editorType);
+        config.theme && params.push('editorTheme=' + config.theme);
+        config.language && params.push('language=' + config.language);
+        id && params.push('id=' + id);
+
         iframe = document.createElement("iframe");
         iframe.width        = '100%';
         iframe.height       = '100%';
         iframe.align        = "top";
         iframe.frameBorder  = 0;
         iframe.scrolling    = "no";
-        iframe.src = getBasePath() + 'MonacoEditor.html' + (config.editorType ? '?editorType=' + config.editorType : '')
-                                                         + (config.theme ? '&editorTheme=' + config.theme : '')
-                                                         + (config.language ? '&language=' + config.language : '');
+        iframe.src = getBasePath() + 'MonacoEditor.html' + (params.length ? '?' + params.join('&') : '');
 
         return iframe;
     }
 
-    function _postMessage(wnd, msg) {
+    function _postMessage(wnd, id, msg) {
         if (wnd && wnd.postMessage && window.JSON) {
+            msg.referer = 'monaco-editor-' + id;
             wnd.postMessage(window.JSON.stringify(msg), "*");
         }
     }

vendor/monaco/MonacoEditorCode.js

@@ -39,7 +39,6 @@ codeEditor.create("editor", window.editorTheme === "dark" ? "vs-dark" : "vs-ligh
 }, function() {
     _postMessage({
         command: 'monacoEditorReady',
-        referer: 'monaco-editor'
     });
 });
 
@@ -51,7 +50,10 @@ if(window.language == 'javascript') {
 }
 
 var _postMessage = function(msg) {
-    window.parent && window.JSON && window.parent.postMessage(window.JSON.stringify(msg), "*");
+    if(window.parent && window.JSON) {
+        msg.referer = 'monaco-editor-' + window.id;
+        window.parent.postMessage(window.JSON.stringify(msg), "*");
+    }
 };
 
 (function (window, undefined) {
@@ -63,7 +65,6 @@ var _postMessage = function(msg) {
         _postMessage({
             command: 'changeValue',
             data: { value: codeEditor.getValue(), pos: {row: pos.lineNumber, column: pos.column} },
-            referer: 'monaco-editor'
         });
     });
 
@@ -126,7 +127,7 @@ var _postMessage = function(msg) {
             cmd = '';
         }
 
-        if (cmd && cmd.referer == "monaco-editor") {
+        if (cmd && cmd.referer == "monaco-editor-" + window.id) {
             if (cmd.command==='setValue') {
                 editorSetValue(cmd.data);
             } else if (cmd.command==='setTheme') {