2

我正在尝试将 CodeMirror 和 Xterm.js 放在 GridLayout 中，如下面的代码。我在这里指定1fr 200px 80px，grid-template-rows但我遇到了问题。

出现的问题

  1. 如果 CodeMirror 文本区域包含足够的文本，则高度会随着文本量的增加而增加。我希望显示滚动条的行为不会超出1fr.

  2. xterm.js 伸出容器。xterm.js 伸出容器。我希望 xterm.js 适合grid-template-rows.

我该如何解决这些问题？谢谢你。

const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
  lineNumbers: true,
  mode: "text/x-csrc",
  viewportMargin: Infinity
});
const codemirror = document.getElementById("code-mirror");
editor.setSize("100%", "100%");

const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

window.addEventListener("resize", function() {
  editor.setSize();
}, false);
.container {
  height: 100vh;
}

.editor {
  display: grid;
  grid-template-rows: 1fr 200px 80px;
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js"></script>
<div class="container">
  <div class="editor">
    <div id="code-mirror">
      <textarea id="editor">
typedef struct {
  void* arg_socket;
  zmq_msg_t* arg_msg;
  char* arg_string;
  unsigned long arg_len;
  int arg_int, arg_command;

  int signal_fd;
  int pad;
  void* context;
  sem_t sem;
} acl_zmq_context;
    </textarea>
    </div>
    <div id="terminal">

    </div>
    <div class="footer">
      <button type="button">
        run
      </button>
    </div>
  </div>
</div>

4

0 回答 0