2

我正在使用Codemirror开发一个基于实验性协作 Web 的 IDE ，但是在我附加了 Codemirror 的新实例之后。它在附加它的机器上运行良好（只要 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>

4

1 回答 1

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);
});

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

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

解决方案：通过删除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>");
    });
   });
   });
于 2015-08-13T06:04:12.320 回答