How to get the ace editor to adjust to its parent

I have the ace div inside another div and I would like the ace editor to adjust it's width and height to the parent div. I call editor.resize() but nothing happens.

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

5条回答

放我归山

2楼-- · 2020-03-01 06:26

You can achieve by the following way. Run the code snippet for example.

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>

0人赞添加讨论(0) 举报

够拽才男人

3楼-- · 2020-03-01 06:28

Reset its settings back to the browser default, which by design fit the parent container.

#editor {
    width: inherit !important;
}

I'm using the react-ace wrapper for reactjs. It could be beneficial to any ace wrapper which have some defaults overwritten.

0人赞添加讨论(0) 举报

在下西门庆

4楼-- · 2020-03-01 06:35

You can achieve what you want in two manners. I have created a jsfiddle showing the css and javascript used to resize the ace-editor to its container.

The css used is to make it so the editor takes up the width and height of the container, so that editor.resize() can properly calculate the size the editor should be.

I recommend the following to get the editor.resize() to work.

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

However if you want to maintain using the current css you have for #editor the following will work.

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

and add position: relative; to the container, so that the absolutely positioned editor is correctly positioned inside its container. As to how this works I refer you to Absolute positioning inside relative positioning.

0人赞添加讨论(0) 举报

等我变得足够好

5楼-- · 2020-03-01 06:41

Using jquery-ace I've managed this simply by using:

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

0人赞添加讨论(0) 举报

欢心

6楼-- · 2020-03-01 06:43

I got it working with simple CSS:

#container{
    height:80vh;
}

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

The key property is position:relative, overriding the default position:absolute of the ace editor, which produces the parent container being unable to adjust its content.

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

0人赞添加讨论(0) 举报

How to get the ace editor to adjust to its parent

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间