javascript - 新しい Codemirror インスタンスが追加されたときに TogetherJS を更新する

Question

Codemirrorを使用して実験的な共同 Web ベースの IDE に取り組んでいますが、Codemirror の新しいインスタンスを追加した後です。それを追加したマシンでは正常に動作しますが (togetherjs が実行されていない限り)、コラボレーションをテストするために他のラップトップ (chromebook と macbook) でテストしたところ、1 つを追加すると macbook に 2 つが表示され、次にChromebook から別のものを追加すると、Macbook から 5 が表示され、Chromebook では 3 が表示されました。不正確な情報を提供する。

言うまでもなく、追加された新しいエディターの一部を実際に使用できませんでした。最初のテスト (他のすべての前に最初に追加することを意味する) では、エディターを使用できましたが、どちらのデバイスにも表示されませんでした。

私が使用しているコラボレーション ツールは、Mozilla のTogetherJSです。

$(".add").click(function() {
  var count = Date.now();
  $(".editor-container").append("<div id='code" + count + "'></div>");
  $(".scripts").append("<scr" + "ipt>\n// Initialize CodeMirror editor\nvar editor" + count + " = CodeMirror(document.getElementById('code" + count + "'), {\n  mode: 'text/html',\n  tabMode: 'indent',\n  styleActiveLine: true,\n  lineNumbers: true,\n  lineWrapping: true,\n  autoCloseTags: true,\n  foldGutter: true,\n  dragDrop : true,\n  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n  value: 'new codemirror editor = " + count + "'\n});</scr" + "ipt>");
  
  var editableeditors = $(".editor-container").html();
  var scripts = $(".scripts").html();
  if (TogetherJS.running) {
    TogetherJS.send({
      type: "editable-editors",
      output: editableeditors
    });
    TogetherJS.send({
      type: "call-scripts",
      output: scripts
    });
  }
});

// Update TogetherJS
TogetherJS.hub.on("editable-editors", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  $(".editor-container").html(msg.output);
});
TogetherJS.hub.on("call-scripts", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  $(".scripts").html(msg.output);
});

.head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.add {
  width: 100%;
  height: 100%;
}

.editor-container {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #262A32;
  overflow: auto;
}

.CodeMirror {
  float: left;
  width: 45%;
  height: 45%;
  border: 1px solid black;
}

<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet'  href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet'  href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>

<div class="head">
  <button class="add">Add CodeMirror</button>
</div>
<div class="editor-container"></div>
<div class="scripts"></div>