在jQuery UI可调整大小的组件中嵌入Ace编辑器

本文介绍了在jQuery UI可调整大小的组件中嵌入Ace编辑器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过将其嵌入到可调整大小的组件中来调整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？如果没有，我该如何做到这一点？

解决方案

<!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>