如何在xterm js中将终端文本左对齐？

Question

XTerm js 是一个用于构建模拟终端的 Web 界面的库，我使用 React JS 和 xterm 构建终端。

到目前为止，我已经有了这段代码并且可以工作，但是尽管我从 xterm 文档中尝试了一切，但我无法使其向左对齐：

这是我使用的与 xterm 相关的依赖项，以防您尝试需要依赖项：

• react-xterm 2.0.4
• 更新了-xterm-for-react 5.0.0
• xterm 5.1.0
• xterm-addon-fit 0.7.0
• xterm-for-react 1.0.4

import React, { useEffect, useRef, useState } from "react";
import { XTerm } from "updated-xterm-for-react";

function Echo() {
  const init = "echo: ";

  const xtermRef = useRef(null);
  const [input, setInput] = useState("");

  useEffect(() => {
    // Add the starting text to the terminal
    xtermRef.current.terminal.write(init);
  }, []);

  // useEffect(() => {
  //   console.log({ input });
  //   xtermRef.current.terminal.clear();
  // }, [input]);

  const handleData = (data) => {
    console.log({ data });
    const code = data.charCodeAt(0);
    console.log({ code });
    if (code === 13) {
      submitHandler(input);
    } else if (code === 127) {
      // Handle backspace (code 127)
      // Remove the last character from the input
      const newInput = input.slice(0, -1);
      setInput(newInput);
      xtermRef.current.terminal.write("\b \b"); // Move cursor back and clear character
    } else {
      xtermRef.current.terminal.write(data);
      setInput((input) => `${input}${data}`);
    }
  };

  // const handleKey = (key) => {
  //   console.log(key);
  //   setInput(key.key);
  //   if (key.domEvent.keyCode === 13) {
  //     submitHandler(input);
  //   }
  // };

  // Your function to execute when Enter is pressed
  const submitHandler = (input) => {
    console.log("Executing function with input:", input);
    xtermRef.current.terminal.writeln("");
    xtermRef.current.terminal.focus();
    if (input.trim() === "clear") {
      clearHandler();
    }
    setInput("");
  };

  const clearHandler = () => {
    console.log("clearing");
    xtermRef.current.terminal.clear();
    xtermRef.current.terminal.write("\x1b[H\x1b[K\x1b[H");
  };

  return (
    <>
      {/* Create a new terminal and set its ref. */}
      <XTerm
        ref={xtermRef}
        onData={handleData}
        focus={true}
        // onKey={handleKey}
        options={{
          cursorBlink: true,
          theme: {
            background: "rgb(8 47 73)",
            foreground: "white",
            cursor: "yellow",
            selectionBackground: "yellow",
            selectionForeground: "black"
          },
          letterSpacing: 0,
          scrollback: 1000,
          fontFamily: "monospace",
          fontSize: 16
        }}
        style={{
          textAlign: "left"
        }}
      />
    </>
  );
}

export default Echo;

Answer 1

这样就完成了，将

rendererType

选项设置为“canvas”并将 JSS 应用于容器

return (
    <div style={{ textAlign: "left" }}>
      {/* Create a new terminal and set its ref. */}
      <XTerm
        ref={xtermRef}
        onData={handleData}
        focus={true}
        // onKey={handleKey}
        options={{
          cursorBlink: true,
          rendererType: "canvas",
          theme: {
            background: "rgb(8 47 73)",
            foreground: "white",
            cursor: "yellow",
            selectionBackground: "yellow",
            selectionForeground: "black"
          },
          letterSpacing: 0,
          scrollback: 1000,
          fontFamily: "monospace",
          fontSize: 16
        }}
        style={{
          textAlign: "left"
        }}
      />
    </div>
  );