use*_*403 4 html jquery jquery-ui ace-editor
我试图通过将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();
}
});
见http://jsbin.com/ojijeb/645/edit
| 归档时间： |
|
| 查看次数： |
4825 次 |
| 最近记录： |