所以最终我试图在node-webkit中这样做。我在那里遇到类似的问题但是这允许我在网络上显示它并且我不确定发生了什么。
如果您转到下面的链接，但是在未最大化的浏览器中，则在输出端进入代码编辑器部分，然后按Enter键输入60行，然后最大化您的浏览器窗口，您会注意到滚动和行号不适应容器。但是，如果您调整输出窗口区域的大小，它将正确调整。我的问题是如何在调整浏览器窗口大小时进行此调整，因为我怀疑这将帮助我在node-webkit中做同样的事情。
答案 0 :(得分：2)
您需要确保在用于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>