我正在尝试并排使用两个代码编辑器控件来显示程序的输入和输出。
我尝试了不同的方法和两种不同的控件(CodeMirror 和 Ace(，但它们似乎都不想并排工作。
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#editor2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="MainStyles.css">
<title>Product App</title>
</head>
<body>
<div class='grid-parent'>
<div class='child'>
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
<div class='child'>
<div id="editor2">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
</div>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/monokai");
editor2.session.setMode("ace/mode/javascript");
</script>
</body>
</html>运行此代码，我似乎只得到一个填充整个页面的编辑器控件。我已经用codeMirror尝试了同样的事情，但无济于事。
我需要菜单等控件周围的各种项目，但现在我只需要一个拆分编辑器，它不引用相同的文件/文本。
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="MainStyles.css">
<title>Product App</title>
</head>
<body>
<div class='grid-parent'>
<div class='child'>
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
<div class='child'>
<div id="editor2">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
</div>
</body>
</html>您可以删除位置绝对的东西。现在，您将这两个编辑器堆叠在一起。
这与编辑器本身无关，因为元素本身的高度是错误的，您可以添加.child{position:relative}，或者删除.child并删除css以进行#editor。
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
margin: 0;
}
body {
height: 100%;
margin: 0;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="MainStyles.css">
<title>Product App</title>
</head>
<body>
<div class='grid-parent'>
<div class='child' id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
<div class='child' id="editor2">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
</div>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/monokai");
editor2.session.setMode("ace/mode/javascript");
</script>
</body>
</html>