Question

我正在尝试通过将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一起使用吗？如果没有，我怎么能做到这一点？

Answer 1

您需要使#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

Answer 2

使用CSS来指定可调整大小的容器可以使用多少空间。

更改样式行：

#resizable { min-width: 500px; min-height: 500px; max-width: 100%; max-height: 100%; padding: 5px; border: 3px solid red}

将其添加到内联样式表中：

#editor { position: absolute; top: 40px; padding: 5px; left:0; bottom:0; right: 0; }

这将允许控件填充整个容器，但最小宽度和高度为500px。

将以下可调整大小的调用更改为不指定min / max

$( "#resizable" ).resizable();

如果您想要自适应模板，请查看Bootstrap

在AceQuery UI Resizable Component中嵌入Ace Editor

2 个答案: