我正在尝试通过将 ace 编辑器嵌入到可调整大小的组件中来调整其大小。
我一直在尝试使用 jQuery UI 可调整大小组件，但无法让 ace 编辑器出现在可调整大小组件内。
Code:
<!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 node
<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();
}
});
see http://jsbin.com/ojijeb/645/edit http://jsbin.com/ojijeb/645/edit
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
