如何让ace编辑器调整到其父分区 [英] How to get the ace editor to adjust to its parent div
问题描述
我在另一个div里面有ace div，我希望ace编辑器将它的宽度和高度调整到父div。我调用了editor.resize（），但没有任何反应。
<！DOCTYPE html>
< html lang =enstyle =height：100％>
< head>
< title> ACE in Action< / title>
< style type =text / cssmedia =screen>
#editor {
top：0;
right：0;
bottom：0;
剩下：0;
height：100px;
}
< / style>
< / head>
< body style =height：100％>
< div style =background-color：red; height：100％; width：100％;>
< div id =editor>函数foo（items）{
var x =所有这些都是语法高亮的;
return x;
}< / div>
< / div>
< script src =ace-builds / src-noconflict / ace.jstype =text / javascriptcharset =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>
您可以通过两种方式实现您想要的功能。我创建了 jsfiddle ，显示用于将ace编辑器调整到其容器的css和javascript。
使用的CSS是为了让编辑器占用容器的宽度和高度，因此 editor.resize（）可以正确计算编辑器的大小。
我推荐以下代码获取 editor.resize（） code> to work。
< style type =text / cssmedia =screen>
#editor {
width：100％;
身高：100％;
}
< / style>
然而，如果你想保持使用当前的css你有 #editor $ b
< style type =text / cssmedia =屏幕 >
#editor {
position：absolute; / *新增* /
top：0;
right：0;
bottom：0;
剩下：0;
}
< / style>
并将位置：相对; 添加到容器，以便绝对定位的编辑器正确定位在其容器内。至于这是如何工作的，我建议你相对定位内的绝对定位。
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>
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.
这篇关于如何让ace编辑器调整到其父分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
