Embedding Ace Editor inside jQuery UI Resizable Component

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

you need to make #editor node the same size as #resizable node

  <style>
  #resizable{position: relative}
  #editor{position: absolute; top:0;left:0;right:0;bottom:0;}
  </style>

and when size of container node changes, notify editor about that by calling editor.resize();

    $( "#resizable" ).resizable({
      resize: function( event, ui ) {
        editor.resize();
      }
    });

see http://jsbin.com/ojijeb/645/edit

来源：https://stackoverflow.com/questions/24333571/embedding-ace-editor-inside-jquery-ui-resizable-component

标签

jquery

html

jquery-ui

ace-editor