附加新的Codemirror实例时更新TogetherJS

时间：2015-08-07 07:41:18

标签： javascript jquery togetherjs

我正在使用Codemirror开发一个基于实验性协作网络的IDE，但在我添加了一个新的Codemirror实例之后。它在附加它的机器上工作正常（只要在一起运行），但是当我用我的其他笔记本电脑（chromebook和macbook）测试它来测试协作时，当我添加一个时，macbook显示两个，然后当我从我的chromebook中添加另一个时，它显示了我的macbook中的5个，而我的chromebook上显示了3个。提供不准确的信息。

更不用说我无法实际使用附加的一些新编辑器。第一个测试（意思是先在任何其他人之前添加）我可以使用编辑器，但没有在任何一个设备上显示。

我使用的协作工具是Mozilla TogetherJS。

＆＃13;
＆＃13; 
$(".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);
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

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

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

将空div标记附加到.editor-container 

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

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

 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标记的内容，codemirror

将生成TogetherJS.hub.on("call-scripts", function (msg) {})个标记 
 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);
});

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

您可以通过发送包含不必要的codemirror标记的空div标签"<div id='code" + count + "'></div>而不是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>");
    });
   });
   });
相关问题
最新问题