我在小提琴中创建了这个来展示我在 nw.js 中尝试做的事情。这工作得很好。在运行时动态创建 2 个选项卡就好了。
我将它移植到我的 nw.js 中,当调用 ace.edit() 说它找不到元素 ID 时出现错误。当我查看 nw.js 中的 DOM 时,我看到了选项卡,并且没有在那里创建编辑器。所以问题是标签和编辑器 div 是在 jsFiddle 但不是在 nw.js 站点中创建的。
是否有无法在 nw.js 中向 DOM 动态添加元素的问题?
$.fn.addEditorTab = function(name, tabName, contents) {
console.log("1");
$('ul', this).append('<li title="' + name + '"><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");
console.log("2");
var editor = ace.edit("editor-" + name);
console.log("3");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.setOptions({
maxLines: Infinity
});
editor.getSession().setValue(contents);
return editor;
};
[编辑] 经过一番混乱之后,似乎只有当我在 w2ui 的面板中有标签 div 时才有问题。
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, style: pstyle, content: 'top', resizable: true },
{ type: 'left', size: 300, style: pstyle, content: '<div id="sidebar" style="height: 100%; width: 100%;"></div>', resizable: true }
//{ type: 'main', style: pstyle, content: '<div id="editor"></div>' }
{ type: 'main', style: pstyle, content: '<div id="tabs"><ul></ul></div>' }
]
});