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

【问题标题】：Embedding Ace Editor inside jQuery UI Resizable Component在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器
【发布时间】：2014-06-20 18:31:34
【问题描述】：

我正在尝试通过将 ace 编辑器嵌入到可调整大小的组件中来调整其大小。我一直在尝试使用 jQuery UI Resizable 组件，但我无法让 ace 编辑器出现在 resizable 组件中。

代码：

<!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 可以做到这一点吗？如果没有，我该怎么做？

【问题讨论】：

标签： jquery html jquery-ui ace-editor

【解决方案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

【讨论】：

【解决方案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; }

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

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

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

如果您想要响应式模板，请查看Bootstrap

【讨论】：

但是，ace 编辑器仍然没有出现在“resizable”中。
您在脚本和样式表标签的开头缺少一些 http
更新了我的答案，让它出现在可调整大小的容器中
谢谢。我还有一些问题需要解决，但这是一个开始！