如何让ace编辑器适应其父div [英] How to get the ace editor to adjust to its parent div

查看：43
本文介绍了如何让ace编辑器适应其父div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<html lang="en" style="height: 100%"><头><title>行动中的王牌</title><style type="text/css" media="screen">#编辑{顶部:0；右:0；底部:0；左:0；高度:100px；}</风格><body style="height: 100%"><div style="background-color: red; height: 100%; width: 100%;"><div id="editor">function foo(items) {var x = "所有这些都是语法高亮";返回 x;}

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

解决方案

您可以通过两种方式实现您想要的.我创建了一个 jsfiddle 显示用于将 ace 编辑器调整到其容器的 css 和 javascript.

使用的css是为了让编辑器占据容器的宽高，这样editor.resize()才能正确计算出编辑器应该是的大小.

我建议使用以下方法来使 editor.resize() 工作.