Incrustar Ace Editor dentro de jQuery UI Resizable Component

Question

Jun 20, 2014, 08:31 PM

Incrustar Ace Editor dentro de jQuery UI Resizable Component

Estoy tratando de hacer que un editor as sea redimensionable incrustándolo dentro de un componente redimensionable. He estado tratando de usar el componente jQuery UI Resizable, pero no puedo hacer que el editor as aparezca dentro del componente redimensionable.

Código:

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

También me gustaría que el editor as pueda responder a los cambios en el tamaño de su contenedor y cambiar su tamaño para que ocupe todo el espacio. ¿Es esto posible con jQuery UI? Si no, ¿cómo puedo lograr esto?