Как заставить редактора туза подстраиваться под родительский div?

У меня есть туз div в другом 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>
Источник

5 ответов

Вы можете достичь того, чего хотите, двумя способами. Я создал jsfiddle, показывающий css и javascript, используемые для изменения размера ace-редактора в его контейнере.

CSS используется, чтобы сделать так, чтобы редактор принимал ширину и высоту контейнера так, чтобы editor.resize() может правильно рассчитать размер редактора.

Я рекомендую следующее, чтобы получить editor.resize() работать.

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

Однако, если вы хотите продолжать использовать текущий CSS, который вы используете для #editor следующее будет работать.

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

и добавить position: relative; к контейнеру, так что абсолютно позиционированный редактор правильно расположен внутри своего контейнера. Что касается того, как это работает, я отсылаю вас к Абсолютному позиционированию внутри относительного позиционирования.

Источник

Я получил это работает с простым CSS:

#container{
    height:80vh;
}

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

Ключевое свойство CSS position:relative, переопределяя дефолт position:absolute редактора ace, который создает родительский контейнер, который не может настроить его содержимое.

<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>
Источник

Вы можете добиться следующим образом. Запустите фрагмент кода, например.

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>

Источник

Используя jquery-ace, я справился с этим просто:

    $('#php_code').ace({
        theme: 'chrome',
        lang: 'php',
        width: '100%',
        height: '300px'
    })
Источник

Сбросьте его настройки обратно к настройкам браузера по умолчанию, которые по дизайну соответствуют родительскому контейнеру.

#editor {
    width: inherit !important;
}

Я использую оболочку реактив-туз для реактивов. Это может быть полезно для любого туза, который имеет некоторые значения по умолчанию.

Источник
Другие вопросы по тегам