我试图通过将 ace 编辑器嵌入到可调整大小的组件中来使它可调整大小。 我一直在尝试使用 jQuery UI Resizable 组件，但我无法让 ace 编辑器出现在可调整大小的组件内。
代码:
<!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 实现吗？如果没有，我该如何实现？
最佳答案
你需要使 #editor 节点与 #resizable 节点大小相同
<style>
#resizable{position: relative}
#editor{position: absolute; top:0;left:0;right:0;bottom:0;}
</style>
当容器节点的大小发生变化时，通过调用 editor.resize();
$( "#resizable" ).resizable({
resize: function( event, ui ) {
editor.resize();
}
});
关于jquery - 在 jQuery UI Resizable Component 中嵌入 Ace Editor，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24333571/