选项卡 div 内的 Ace 编辑器未随浏览器 window 调整大小（内部演示代码）
Ace editor inside tab div not resizing with browser window (demo code inside)
所以最终我试图在 node-webkit 中做到这一点。我在那里遇到了类似的问题，但这允许我在网络端显示它，我不确定发生了什么。
如果您转到下面的 link 但在未最大化的浏览器中，则在输出端进入代码编辑器部分，只需按 enter 键 60 行，然后最大化您的浏览器 window 你会注意到滚动和行号不适应容器。但是，如果您调整输出 window 区域的大小，它将正确调整。我的问题是如何在调整浏览器 window 大小时进行此调整，因为我怀疑这会帮助我在 node-webkit 中做同样的事情。
您需要确保在用于 ace 的节点上设置正确的大小，并在布局更改时调用 editor.resize()。像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Complex Layout Demo</title>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.com/demos/css/complex.css">
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<style>
#editor { position: absolute; top: 50px; left: 0; right: 0; bottom: 0;}
</style>
<script type="text/javascript">
/*
* complex.html
*
* This is a demonstration page for the jQuery layout widget
*
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
var outerLayout, innerLayout;
/*
*#######################
* ON PAGE LOAD
*#######################
*/
$(function(){
// create the OUTER LAYOUT
outerLayout = $("body").layout( layoutSettings_Outer );
var editor = window.editor = ace.edit("editor");
$("#tabs").tabs();
//editor.setTheme("ace/theme/chrome");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
/*******************************
*** CUSTOM LAYOUT BUTTONS ***
*******************************
*
* Add SPANs to the east/west panes for customer "close" and "pin" buttons
*
* COULD have hard-coded span, div, button, image, or any element to use as a 'button'...
* ... but instead am adding SPANs via script - THEN attaching the layout-events to them
*
* CSS will size and position the spans, as well as set the background-images
*/
// BIND events to hard-coded buttons in the NORTH toolbar
outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
outerLayout.addPinBtn( "#tbarPinWest", "west" );
outerLayout.addPinBtn( "#tbarPinEast", "east" );
// save selector strings to vars so we don't have to repeat it
// must prefix paneClass with "body > " to target ONLY the outerLayout panes
var westSelector = "body > .ui-layout-west"; // outer-west pane
var eastSelector = "body > .ui-layout-east"; // outer-east pane
// CREATE SPANs for pin-buttons - using a generic class as identifiers
$("<span></span>").addClass("pin-button").prependTo( westSelector );
$("<span></span>").addClass("pin-button").prependTo( eastSelector );
// BIND events to pin-buttons to make them functional
outerLayout.addPinBtn( westSelector +" .pin-button", "west");
outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );
// CREATE SPANs for close-buttons - using unique IDs as identifiers
$("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
$("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
// BIND layout events to close-buttons to make them functional
outerLayout.addCloseBtn("#west-closer", "west");
outerLayout.addCloseBtn("#east-closer", "east");
// DEMO HELPER: prevent hyperlinks from reloading page when a 'base.href' is set
$("a").each(function () {
var path = document.location.href;
if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
});
});
/*
*#######################
* OUTER LAYOUT SETTINGS
*#######################
*
* This configuration illustrates how extensively the layout can be customized
* ALL SETTINGS ARE OPTIONAL - and there are more available than shown below
*
* These settings are set in 'sub-key format' - ALL data must be in a nested data-structures
* All default settings (applied to all panes) go inside the defaults:{} key
* Pane-specific settings go inside their keys: north:{}, south:{}, center:{}, etc
*/
var layoutSettings_Outer = {
name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
// options.defaults apply to ALL PANES - but overridden by pane-specific settings
, defaults: {
size: "auto"
, minSize: 50
, paneClass: "pane" // default = 'ui-layout-pane'
, resizerClass: "resizer" // default = 'ui-layout-resizer'
, togglerClass: "toggler" // default = 'ui-layout-toggler'
, buttonClass: "button" // default = 'ui-layout-button'
, contentSelector: ".content" // inner div to auto-size so only it scrolls, not the entire pane!
, contentIgnoreSelector: "span" // 'paneSelector' for content to 'ignore' when measuring room for content
, togglerLength_open: 35 // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
, togglerLength_closed: 35 // "100%" OR -1 = full height
, hideTogglerOnSlide: true // hide the toggler when pane is 'slid open'
, togglerTip_open: "Close This Pane"
, togglerTip_closed: "Open This Pane"
, resizerTip: "Resize This Pane"
// effect defaults - overridden on some panes
, fxName: "slide" // none, slide, drop, scale
, fxSpeed_open: 750
, fxSpeed_close: 1500
, fxSettings_open: { easing: "easeInQuint" }
, fxSettings_close: { easing: "easeOutQuint" }
}
, north: {
spacing_open: 1 // cosmetic spacing
, togglerLength_open: 0 // HIDE the toggler button
, togglerLength_closed: -1 // "100%" OR -1 = full width of pane
, resizable: false
, slidable: false
// override default effect
, fxName: "none"
}
, south: {
maxSize: 200
, size: 200
, spacing_closed: 21 // HIDE resizer & toggler when 'closed'
, slidable: true // REFERENCE - cannot slide if spacing_closed = 0
, initClosed: false
// CALLBACK TESTING...
//, onhide_start: function () { return confirm("START South pane hide \n\n onhide_start callback \n\n Allow pane to hide?"); }
//, onhide_end: function () { alert("END South pane hide \n\n onhide_end callback"); }
//, onshow_start: function () { return confirm("START South pane show \n\n onshow_start callback \n\n Allow pane to show?"); }
//, onshow_end: function () { alert("END South pane show \n\n onshow_end callback"); }
//, onopen_start: function () { return confirm("START South pane open \n\n onopen_start callback \n\n Allow pane to open?"); }
//, onopen_end: function () { alert("END South pane open \n\n onopen_end callback"); }
//, onclose_start: function () { return confirm("START South pane close \n\n onclose_start callback \n\n Allow pane to close?"); }
//, onclose_end: function () { alert("END South pane close \n\n onclose_end callback"); }
//, onresize_start: function () { return confirm("START South pane resize \n\n onresize_start callback \n\n Allow pane to be resized?)"); }
//, onresize_end: function () { alert("END South pane resize \n\n onresize_end callback \n\n NOTE: onresize_start event was skipped."); }
}
, west: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE west-pane
, togglerTip_open: "Close West Pane"
, togglerTip_closed: "Open West Pane"
, resizerTip_open: "Resize West Pane"
, slideTrigger_open: "click" // default
, initClosed: false
// add 'bounce' option to default 'slide' effect
, fxSettings_open: { easing: "easeOutBounce" }
}
, east: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE east-pane
, togglerTip_open: "Close East Pane"
, togglerTip_closed: "Open East Pane"
, resizerTip_open: "Resize East Pane"
, slideTrigger_open: "mouseover"
, initClosed: false
// override default effect, speed, and settings
, fxName: "drop"
, fxSpeed: "normal"
, fxSettings: { easing: "" } // nullify default easing
}
, center: {
paneSelector: "#mainContent" // sample: use an ID to select pane instead of a class
, minWidth: 200
, minHeight: 200
, onresize_end: function () { editor.resize() }
}
};
</script>
</head>
<body style="height: 100%">
<input style="display: none" id="projectDialog" type="file" />
<div class="ui-layout-west">
<div class="header">Project Explorer</div>
<div class="content">
<!-- This is the project structure. We start with the Scripts and Shaders folder and dynamically add the tree structure in code above when they open a project. Starts out invisible until project selected. -->
<div class="css-treeview" id="projectTree" style="display: none;">
<ul>
<li><input type="checkbox" id="projectRoot" /><label for="ProjectRoot" id="projectRootLabel">ProjectName</label>
<ul>
<li><input type="checkbox" id="Scripts" /><label for="Scripts">Scripts</label>
<ul>
<li>Test.lua</li>
</ul>
</li>
<li><input type="checkbox" id="Shaders" /><label for="Shaders">Shaders</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="ui-layout-north">
<ul class="toolbar">
<li id="tbarToggleNorth" class="first"><span></span>TODO: Toolbar here</li>
<li id="tbarOpenSouth"><span></span>TODO: Toolbar icons here</li>
</ul>
</div>
<div class="ui-layout-south">
<div class="header">Outer - South</div>
<div class="content">
TODO: Debug/console/error/warning tabs here
</div>
</div>
<div id="mainContent" style="padding: 0; height: 100%; overflow-y: hidden;">
<div class="ui-layout-center" style="height: 100%">
<div class="ui-layout-content" style="padding: 0; height: 100%;">
<div id="tabs" style="padding: 0; margin: 0; height: 100%">
<ul>
<li><a href="#App_lua">App.lua</a></li>
<li><a href="#AnimationManager_lua">AnimationManager.lua</a></li>
<li><a href="#AI_lua">AI.lua</a></li>
</ul>
<div id="App_lua" style="background-color: orange; padding: 0; margin-left: 0px;">
<div id="editor" >function App:Start()
end
function App:Loop()
end</div>
</div>
<div id="AnimationManager_lua">
File 2
</div>
<div id="AI_lua">
File 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
所以最终我试图在 node-webkit 中做到这一点。我在那里遇到了类似的问题，但这允许我在网络端显示它，我不确定发生了什么。
如果您转到下面的 link 但在未最大化的浏览器中，则在输出端进入代码编辑器部分，只需按 enter 键 60 行，然后最大化您的浏览器 window 你会注意到滚动和行号不适应容器。但是，如果您调整输出 window 区域的大小，它将正确调整。我的问题是如何在调整浏览器 window 大小时进行此调整，因为我怀疑这会帮助我在 node-webkit 中做同样的事情。
您需要确保在用于 ace 的节点上设置正确的大小，并在布局更改时调用 editor.resize()。像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Complex Layout Demo</title>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.com/demos/css/complex.css">
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<style>
#editor { position: absolute; top: 50px; left: 0; right: 0; bottom: 0;}
</style>
<script type="text/javascript">
/*
* complex.html
*
* This is a demonstration page for the jQuery layout widget
*
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
var outerLayout, innerLayout;
/*
*#######################
* ON PAGE LOAD
*#######################
*/
$(function(){
// create the OUTER LAYOUT
outerLayout = $("body").layout( layoutSettings_Outer );
var editor = window.editor = ace.edit("editor");
$("#tabs").tabs();
//editor.setTheme("ace/theme/chrome");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
/*******************************
*** CUSTOM LAYOUT BUTTONS ***
*******************************
*
* Add SPANs to the east/west panes for customer "close" and "pin" buttons
*
* COULD have hard-coded span, div, button, image, or any element to use as a 'button'...
* ... but instead am adding SPANs via script - THEN attaching the layout-events to them
*
* CSS will size and position the spans, as well as set the background-images
*/
// BIND events to hard-coded buttons in the NORTH toolbar
outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
outerLayout.addPinBtn( "#tbarPinWest", "west" );
outerLayout.addPinBtn( "#tbarPinEast", "east" );
// save selector strings to vars so we don't have to repeat it
// must prefix paneClass with "body > " to target ONLY the outerLayout panes
var westSelector = "body > .ui-layout-west"; // outer-west pane
var eastSelector = "body > .ui-layout-east"; // outer-east pane
// CREATE SPANs for pin-buttons - using a generic class as identifiers
$("<span></span>").addClass("pin-button").prependTo( westSelector );
$("<span></span>").addClass("pin-button").prependTo( eastSelector );
// BIND events to pin-buttons to make them functional
outerLayout.addPinBtn( westSelector +" .pin-button", "west");
outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );
// CREATE SPANs for close-buttons - using unique IDs as identifiers
$("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
$("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
// BIND layout events to close-buttons to make them functional
outerLayout.addCloseBtn("#west-closer", "west");
outerLayout.addCloseBtn("#east-closer", "east");
// DEMO HELPER: prevent hyperlinks from reloading page when a 'base.href' is set
$("a").each(function () {
var path = document.location.href;
if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
});
});
/*
*#######################
* OUTER LAYOUT SETTINGS
*#######################
*
* This configuration illustrates how extensively the layout can be customized
* ALL SETTINGS ARE OPTIONAL - and there are more available than shown below
*
* These settings are set in 'sub-key format' - ALL data must be in a nested data-structures
* All default settings (applied to all panes) go inside the defaults:{} key
* Pane-specific settings go inside their keys: north:{}, south:{}, center:{}, etc
*/
var layoutSettings_Outer = {
name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
// options.defaults apply to ALL PANES - but overridden by pane-specific settings
, defaults: {
size: "auto"
, minSize: 50
, paneClass: "pane" // default = 'ui-layout-pane'
, resizerClass: "resizer" // default = 'ui-layout-resizer'
, togglerClass: "toggler" // default = 'ui-layout-toggler'
, buttonClass: "button" // default = 'ui-layout-button'
, contentSelector: ".content" // inner div to auto-size so only it scrolls, not the entire pane!
, contentIgnoreSelector: "span" // 'paneSelector' for content to 'ignore' when measuring room for content
, togglerLength_open: 35 // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
, togglerLength_closed: 35 // "100%" OR -1 = full height
, hideTogglerOnSlide: true // hide the toggler when pane is 'slid open'
, togglerTip_open: "Close This Pane"
, togglerTip_closed: "Open This Pane"
, resizerTip: "Resize This Pane"
// effect defaults - overridden on some panes
, fxName: "slide" // none, slide, drop, scale
, fxSpeed_open: 750
, fxSpeed_close: 1500
, fxSettings_open: { easing: "easeInQuint" }
, fxSettings_close: { easing: "easeOutQuint" }
}
, north: {
spacing_open: 1 // cosmetic spacing
, togglerLength_open: 0 // HIDE the toggler button
, togglerLength_closed: -1 // "100%" OR -1 = full width of pane
, resizable: false
, slidable: false
// override default effect
, fxName: "none"
}
, south: {
maxSize: 200
, size: 200
, spacing_closed: 21 // HIDE resizer & toggler when 'closed'
, slidable: true // REFERENCE - cannot slide if spacing_closed = 0
, initClosed: false
// CALLBACK TESTING...
//, onhide_start: function () { return confirm("START South pane hide \n\n onhide_start callback \n\n Allow pane to hide?"); }
//, onhide_end: function () { alert("END South pane hide \n\n onhide_end callback"); }
//, onshow_start: function () { return confirm("START South pane show \n\n onshow_start callback \n\n Allow pane to show?"); }
//, onshow_end: function () { alert("END South pane show \n\n onshow_end callback"); }
//, onopen_start: function () { return confirm("START South pane open \n\n onopen_start callback \n\n Allow pane to open?"); }
//, onopen_end: function () { alert("END South pane open \n\n onopen_end callback"); }
//, onclose_start: function () { return confirm("START South pane close \n\n onclose_start callback \n\n Allow pane to close?"); }
//, onclose_end: function () { alert("END South pane close \n\n onclose_end callback"); }
//, onresize_start: function () { return confirm("START South pane resize \n\n onresize_start callback \n\n Allow pane to be resized?)"); }
//, onresize_end: function () { alert("END South pane resize \n\n onresize_end callback \n\n NOTE: onresize_start event was skipped."); }
}
, west: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE west-pane
, togglerTip_open: "Close West Pane"
, togglerTip_closed: "Open West Pane"
, resizerTip_open: "Resize West Pane"
, slideTrigger_open: "click" // default
, initClosed: false
// add 'bounce' option to default 'slide' effect
, fxSettings_open: { easing: "easeOutBounce" }
}
, east: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE east-pane
, togglerTip_open: "Close East Pane"
, togglerTip_closed: "Open East Pane"
, resizerTip_open: "Resize East Pane"
, slideTrigger_open: "mouseover"
, initClosed: false
// override default effect, speed, and settings
, fxName: "drop"
, fxSpeed: "normal"
, fxSettings: { easing: "" } // nullify default easing
}
, center: {
paneSelector: "#mainContent" // sample: use an ID to select pane instead of a class
, minWidth: 200
, minHeight: 200
, onresize_end: function () { editor.resize() }
}
};
</script>
</head>
<body style="height: 100%">
<input style="display: none" id="projectDialog" type="file" />
<div class="ui-layout-west">
<div class="header">Project Explorer</div>
<div class="content">
<!-- This is the project structure. We start with the Scripts and Shaders folder and dynamically add the tree structure in code above when they open a project. Starts out invisible until project selected. -->
<div class="css-treeview" id="projectTree" style="display: none;">
<ul>
<li><input type="checkbox" id="projectRoot" /><label for="ProjectRoot" id="projectRootLabel">ProjectName</label>
<ul>
<li><input type="checkbox" id="Scripts" /><label for="Scripts">Scripts</label>
<ul>
<li>Test.lua</li>
</ul>
</li>
<li><input type="checkbox" id="Shaders" /><label for="Shaders">Shaders</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="ui-layout-north">
<ul class="toolbar">
<li id="tbarToggleNorth" class="first"><span></span>TODO: Toolbar here</li>
<li id="tbarOpenSouth"><span></span>TODO: Toolbar icons here</li>
</ul>
</div>
<div class="ui-layout-south">
<div class="header">Outer - South</div>
<div class="content">
TODO: Debug/console/error/warning tabs here
</div>
</div>
<div id="mainContent" style="padding: 0; height: 100%; overflow-y: hidden;">
<div class="ui-layout-center" style="height: 100%">
<div class="ui-layout-content" style="padding: 0; height: 100%;">
<div id="tabs" style="padding: 0; margin: 0; height: 100%">
<ul>
<li><a href="#App_lua">App.lua</a></li>
<li><a href="#AnimationManager_lua">AnimationManager.lua</a></li>
<li><a href="#AI_lua">AI.lua</a></li>
</ul>
<div id="App_lua" style="background-color: orange; padding: 0; margin-left: 0px;">
<div id="editor" >function App:Start()
end
function App:Loop()
end</div>
</div>
<div id="AnimationManager_lua">
File 2
</div>
<div id="AI_lua">
File 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>