两个代码编辑器拒绝并排坐答案

【问题标题】：Two code editors refuse to sit side by side两个代码编辑器拒绝并排坐
【发布时间】：2019-08-19 11:28:14
【问题描述】：

我正在尝试并排使用两个代码编辑器控件来显示程序的输入和输出。

我尝试了不同的方法和两种不同的控件（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 尝试过同样的事情，但无济于事。

我需要围绕菜单等控件的各种项目，但现在我只需要一个拆分编辑器，它不会引用相同的文件/文本。

【问题讨论】：

会发生什么？是否给出了任何错误消息？

标签： javascript ace-editor code-editor

【解决方案1】：

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

您可以删除位置绝对的东西。现在，您将这两个编辑器叠加在一起。

【讨论】：

【解决方案2】：

这与编辑器本身无关，因为元素本身的高度不对，您可以添加.child{position:relative}，或者删除.child并删除#editor的css。

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

【讨论】：