我正在尝试通过将ace编辑器嵌入可调整大小的组件中来调整其大小。我一直在尝试使用jQuery UI Resizable组件，但是我无法让ace编辑器出现在resizable组件内。
码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resizable Ace Editor Using jQuery</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 500px; height: 500px; padding: 5px; border: 3px solid red}
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(document).ready(function() {
editor = ace.edit('editor');
editor.setTheme('ace/theme/monokai');
editor.getSession().setMode('ace/mode/java');
$( "#resizable" ).resizable({
maxHeight: 600,
maxWidth: 500,
minHeight: 500,
minWidth: 500
});
});
</script>
</head>
<body>
<div id="resizable">
<h3 class="ui-widget-header">Ace Editor</h3>
<div id="editor"></div>
</div>
</body>
</html>
我还希望ace编辑器能够响应其容器大小的更改并调整自身大小，以使其充满整个空间。jQuery UI有可能吗？如果没有，我该怎么做？
使用CSS来指示可调整大小的容器可以使用多少空间。
更改样式行：
#resizable { min-width: 500px; min-height: 500px; max-width: 100%; max-height: 100%; padding: 5px; border: 3px solid red}
将此添加到您的内联样式表：
#editor { position: absolute; top: 40px; padding: 5px; left:0; bottom:0; right: 0; }
这将允许控件填充整个容器，但最小宽度和高度为500px。
更改以下可调整大小的调用以不指定最小/最大
$( "#resizable" ).resizable();
如果您需要响应式模板，请查看Bootstrap
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句