删除选项卡中的多个 ace 编辑器

Question

我最终使用 nw.js 制作了一个 IDE，因此内容和文件名将来自此人的 PC，但此 fiddle 复制了我将拥有的信息。如果你打开一个选项卡，然后使用 'x' 按钮关闭它并检查你的控制台，你会发现它找不到编辑器元素，但是如果你深入 DOM 你会看到它在那里.知道为什么移除标签会爆炸吗？我正在尝试弄清楚当用户想要关闭文件时如何清理这些东西。

http://jsfiddle.net/2Lu35rqm/

$.fn.addEditorTab = function (name, tabName, contents) {
    $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
    $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
    $(this).tabs("refresh");

    var editor = ace.edit("editor-" + name);
    editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    editor.getSession().setValue(contents);

    return editor;
};

$(function(){
    var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
    var file2Contents = "function bar(items) { \r   var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
      var panelId = $(this).closest("li").remove().attr("aria-controls");
      var editorId = panelId.replace("tab-", "editor-");

      console.log("A");
      $("#" + editorId).remove();

      console.log("B");
      $("#" + panelId).remove();

      console.log("C");
      editors[editorId.replace("-editor", "")].destroy();

      console.log("D");
      tabs.tabs("refresh");
    });
});

Answer 1

问题出在选择器上：$("#tab-D:/Test/file1.js") & $("#editor-D:/Test/file1.js")。将它们切换到不同的选择器会有所帮助。

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

工作示例：http://jsfiddle.net/Twisty/pp5ssbLn/

JavaScript

$.fn.addEditorTab = function(name, tabName, contents) {
  $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
  $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
  $(this).tabs("refresh");

  var editor = ace.edit("editor-" + name);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setValue(contents);

  return editor;
};

$(function() {
  var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
  var file2Contents = "function bar(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    var editorId = panelId.replace("tab-", "editor-");

    console.log("A, Editor: " + editorId);
    $("div[id='" + editorId + "']").remove();

    console.log("B, Panel: " + panelId);
    $("div[id='" + panelId + "']").remove();

    console.log("C");
    editors[editorId.replace("editor-", "")].destroy();

    console.log("D");
    tabs.tabs("refresh");
  });
});

还应用了 editors[editorId.replace("-editor", "")].destroy();

的修复

希望对您有所帮助。

删除选项卡中的多个 ace 编辑器

removing multiple ace editors within tabs

jquery-ui

ace-editor