追加新的代码镜像实例时更新TogetherJS

Update TogetherJS When New Codemirror Instance is Appended

本文关键字：更新 TogetherJS 实例 镜像 代码 追加      更新时间：2023-09-26

我正在使用Codemirror开发一个实验性的基于web的协作IDE，但在添加了一个新的Codemirrors实例之后。它在附加它的机器上运行良好(只要togetherjs没有运行(，但当我用我的另一台笔记本电脑(chromebook和macbook(测试它以测试协作时，当我附加一台时，macbook显示两台，然后当我从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>

我对这些框架一无所知，但对您提出的问题很感兴趣，并开始调试代码。我在这里看到了一些问题。只是想一步一步地解释。

$(".editor-container").append("<div id='code" + count + "'></div>");

将空的div标签附加到.editor-container

$(".scripts").append("<scr" + "ipt>'n// ................

一旦追加，脚本就会被执行，并在上面的div标记中生成codemirror标记。

 var editableeditors = $(".editor-container").html();
 TogetherJS.send({
   type: "editable-editors",
   output: editableeditors
 });

上面的代码发送包含div标签的内容以及生成的codemirror子标签

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

在对等端上，用生成的codemirror标签附加内容，TogetherJS.hub.on("call-scripts", function (msg) {}) 将再次生成codemirror标签

 var scripts = $(".scripts").html();
 TogetherJS.send({
   type: "call-scripts",
   output: scripts
 });

现在将脚本标记发送到对等

TogetherJS.hub.on("call-scripts", function (msg) {
 if (! msg.sameUrl) {
  return;
 }
 $(".scripts").html(msg.output);
});

它再次执行所有脚本，导致重复

您可以通过发送空div标记列表"<div id='code" + count + "'></div>而不是包含不必要的codemirror标记的var editableeditors = $(".editor-container").html()来解决问题。

解决方案：通过删除call-scripts事件、but can't modify other peers content 进行简单修复

$(window).load(function() {
$(".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
        });
    }
});
// Update TogetherJS
TogetherJS.hub.on("editable-editors", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    $(".editor-container").html(msg.output);
});
});

解决方案2:can modify other peers content

$(window).load(function() {
var listOfEditors = "";
var contentMap = {};
$("body").on("keyup", ".customEditor", function() {
    contentMap[$(this).attr("id")] = $(this).find(".CodeMirror-line").text();
});
$(".add").click(function() {
    var count = Date.now();
    var newEditor = "<div class='customEditor' id='code" + count + "'></div>";
    listOfEditors = listOfEditors + newEditor;
    $(".editor-container").append(newEditor);
    $(".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>");
    contentMap["code" + count] = "new codemirror editor = " + count;
    var editableeditors = $(".editor-container").html();
    var scripts = $(".scripts").html("");
    if (TogetherJS.running) {
        TogetherJS.send({
            type: "editable-editors",
            output: listOfEditors
        });
        TogetherJS.send({
            type: "call-scripts",
            output: contentMap
        });
    }
});
// Update TogetherJS
TogetherJS.hub.on("editable-editors", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    listOfEditors = listOfEditors + msg.output;
    $(".editor-container").html(listOfEditors);
});
TogetherJS.hub.on("call-scripts", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    $(".scripts").html("");
    $.each(msg.output, function(key, value) {
        contentMap[key] = value;
        var count = key.replace("code", "");
        $(".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: '" + value + "''n});</scr" + "ipt>");
    });
   });
   });
相关文章：