如何让 ace 编辑器适应其父 div答案

【问题标题】：How to get the ace editor to adjust to its parent div如何让 ace 编辑器适应其父 div
【发布时间】：2015-05-01 09:01:47
【问题描述】：

我在另一个 div 中有 ace div，我希望 ace 编辑器将其宽度和高度调整为父 div。我调用 editor.resize() 但没有任何反应。

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100px;
    }
</style>
</head>
<body style="height: 100%">
<div style="background-color: red; height: 100%; width: 100%;">
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
</div>

<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

    editor.resize();
</script>
</body>
</html>

【问题讨论】：

标签： html css ace-editor

【解决方案1】：

您可以通过两种方式实现您想要的。我创建了一个jsfiddle，显示了用于将 ace-editor 调整为其容器大小的 css 和 javascript。

使用的css是为了让编辑器占据容器的宽度和高度，以便editor.resize()能够正确计算出编辑器应该有的大小。

我建议以下方法让editor.resize() 工作。

<style type="text/css" media="screen">
    #editor {
        width: 100%;
        height: 100%;
    }
</style>

但是，如果您想继续使用 #editor 的当前 css，则以下内容将起作用。

<style type="text/css" media="screen">
    #editor {
        position: absolute; /* Added */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
   }
</style>

并将position: relative; 添加到容器中，以便绝对定位的编辑器正确定位在其容器内。至于它是如何工作的，我推荐你Absolute positioning inside relative positioning.

【讨论】：

您的逻辑调整高度但不调整宽度。对吗？
高度和宽度都要调整。这就是高度和宽度的 100% 的用途。

【解决方案2】：

您可以通过以下方式实现。以运行代码 sn -p 为例。

var editor = ace.edit("editor");
        editor.setTheme("ace/theme/tomorrow_night");
        editor.session.setMode("ace/mode/xml");
        editor.session.setUseSoftTabs(true);

#parent {
    width:50%;
    height: 600px;
    display:inline-block;
    position:relative;
}
#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
<html>
   <body>
      <div id="parent">
          <div id="editor"></div>
      </div>
   </body>
</html>

【讨论】：

【解决方案3】：

我可以使用简单的 CSS：

#container{
    height:80vh;
}

#editor {
    width: 100%;
    height: 100%;
    position: relative;
}

关键属性为position:relative，覆盖ace编辑器的默认position:absolute，导致父容器无法调整其内容。

<div id="container">
    <pre id="editor">
        &#x3C;div&#x3E;
        &#x9;&#x9;this is a div
        &#x9;&#x3C;/div&#x3E;
    </pre>
</div>

<script>
    $(document).ready(function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/TextMate");
        editor.session.setMode("ace/mode/html");
    });
</script>

【讨论】：

嵌入反应组件时遇到此问题。通过index.css 中的index.js 导入给定的CSS 有帮助。谢谢！

【解决方案4】：

使用jquery-ace 我只是通过使用来解决这个问题：

    $('#php_code').ace({
        theme: 'chrome',
        lang: 'php',
        width: '100%',
        height: '300px'
    })

【讨论】：

你可以用同样的方式不使用jquery，只需将width设置为'100%'

【解决方案5】：

将其设置重置为浏览器默认设置，这在设计上适合父容器。

#editor {
    width: inherit !important;
}

我正在为 reactjs 使用 react-ace 包装器。这对于任何覆盖了一些默认值的 ace 包装器都可能是有益的。

【讨论】：

这似乎对我有用，在我的情况下，问题在于高度，编辑器设置为完全显示高度，这是正确的，但 ace_content 类总是更小，所以只有 3 行我写它已经开始滚动了。这怎么能工作而不像父 div 那样将高度和宽度设置为 100%？