在jQuery UI可调整大小的组件中嵌入Ace编辑器 [英] Embedding Ace Editor inside jQuery UI Resizable Component
问题描述
我试图通过将其嵌入到可调整大小的组件中来调整ace编辑器的大小。
我一直在尝试使用jQuery UI Resizable组件，但是我无法让ace编辑器出现在可调整大小的组件中。
代码：
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title>可缩放Ace编辑器使用jQuery< / title>
< script src =// cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.jstype =text / javascriptcharset =utf-8>< /脚本>
< link rel =stylesheethref =// 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 =stylesheethref =/ resources / demos / style.css>
< style>
#resizable {width：500px;身高：500px;填充：5px; border：3px solid red}
#resizable h3 {text-align：center;保证金：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编辑器< / h3>
< div id =editor>< / div>
< / div>
< / body>
< / html>
我还希望ace编辑器能够响应其容器大小的变化并调整自身大小这样它就会填满整个空间。这可能与jQuery UI？如果没有，我该如何做到这一点？
解决方案使用CSS来指定可调整大小的容器可以使用多少空间。
更改样式线：
#resizable {min-width：500px; min-height：500px;最大宽度：100％;最大高度：100％;填充：5px; border：3px solid red}
将其添加到您的内联样式表中：
#editor {position：absolute;顶部：40px;填充：5px;左：0;底部：0;正确：0; }
这将允许控件填充整个容器，但最小宽度和高度为500像素。
将以下可调整大小的调用更改为不指定最小/最大值
$（#resizable）.resizable （）;
如果您想要一个响应模板，请查看 Bootstrap
I'm trying to make an ace editor resizable by embedding it inside a resizable component. I've been trying to use the jQuery UI Resizable component, but I can't get the ace editor to appear inside the resizable component.
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>
I would also like the ace editor to be able to respond to changes in its container's size and resize itself so that it fills the whole space. Is this possible with jQuery UI? If not, how can I accomplish this?
Use CSS to dictate how much space the resizable container can use.
Change your style line:
#resizable { min-width: 500px; min-height: 500px; max-width: 100%; max-height: 100%; padding: 5px; border: 3px solid red}
Add this to your inline stylesheet:
#editor { position: absolute; top: 40px; padding: 5px; left:0; bottom:0; right: 0; }
This will allow the control to fill the whole container but have a minimum width and height of 500px.
Change the following resizable call to not specify the min/max
$( "#resizable" ).resizable();
If you want a responsive template, check out Bootstrap
这篇关于在jQuery UI可调整大小的组件中嵌入Ace编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
