前言

大家新年好呀~ 因为工作比较忙，有一段时间没更新了(其实就是懒)，一直没想好写啥，直到最近工作中遇到了个需要内嵌 网页终端(web-terminal) 的需求，踩了不少坑，终于整明白了大概，想着写篇文章回馈下社区，于是乎说干就干，走起~

xterm.js 初探

知道需要做 web-terminal ，第一件事先网上调研一下具体需要的技术，最后发现 xterm.js 为大多数 web-terminal 的解决方案，大名鼎鼎的 vscode 也在用，看来可靠性还是有所保证的。

于是乎，我兴高采烈的敲进官网找 demo，瞅了一眼，好家伙看起来挺简单啊，只需要安装一下，初始化实例就行了，如下：npm install xterm复制代码html>

    

复制代码

因为我们项目的基于 React 的，所以我准备用 create-react-app 写个 demo 试试，一顿操作之后，把官网的例子拷进 demo 里，然后运行一下，看看效果。

随后页面出来了终端的样式，如下：

正准备输写字符看看效果，好家伙。。居然无法输入，我一度怀疑是我 demo 复制错了，仔细比对，发现确实没错啊？？

然后我找了找文档，发现输入还需要调用 api 才行，感情官网的例子居然还不能直接运行的，也是第一次见。

调整了下代码term.open(document.getElementById("terminal"));

term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ");+ term.onData((val) => {+     term.write(val);+   }); 复制代码

输入终于可以了，但是新的问题又来了，一删除就报错

而且一回车就光标回到最开始了，这。。我不禁陷入了沉思，再次回到文档找寻，发现了文档对 onData 的描述contains real string data with any valid Unicode codepoint, thus the payload should be treated as UTF-16/UCS-2. For