谁用过xterm.js这款插件?_前端问题_站长_知道

小弟想用xterm.js 做一个连接webterminal ,看了下网上的教程,都过时了...现在最新的版本是:xterm@4.3.0 文件的路径和目录结构都变了,按照网上教程引进去直接报错了,心酸....

贴一下借鉴过的地址:

第一个

第二个

请大佬给个好看点的文档借鉴地址(except官网)

这种引入直接报错了

已解决悬赏分：20 - 解决时间 2021-11-29 08:42

点赞 0反对 0举报 0 收藏 0

回答2

最佳

@shanding

xterm.js 官网地址
xterm.js 仓库地址

从git仓库来看，xterm-addon-fit的文件机构的确有变化，您可以单独安装

npm install --save xterm-addon-fit

使用Demo

import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';

const terminal \= new Terminal();
const fitAddon \= new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(containerElement);
fitAddon.fit();

官方demo

根据官网代码改用4.3.0版本实现链接

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <link rel="stylesheet" href="https://xtermjs.org/css/main.css">
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <h2 id="demo">Demo</h2>
<div id="terminal"></div>
<link rel="stylesheet" href="https://unpkg.com/xterm@4.3.0/css/xterm.css" />
<script src="https://unpkg.com/xterm@4.3.0/lib/xterm.js"></script>
  
<script>
  $(function () {
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    function runFakeTerminal() {
        if (term._initialized) {
            return;
        }

        term._initialized = true;

        term.prompt = () => {
            term.write('\r\n$ ');
        };

        term.writeln('Welcome to xterm.js');
        term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
        term.writeln('Type some keys and commands to play around.');
        term.writeln('');
        prompt(term);

        term.onKey(e => {
            const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;

            if (e.domEvent.keyCode === 13) {
                prompt(term);
            } else if (e.domEvent.keyCode === 8) {
                // Do not delete the prompt
                if (term._core.buffer.x > 2) {
                    term.write('\b \b');
                }
            } else if (printable) {
                term.write(e.key);
            }
        });
    }

    function prompt(term) {
      term.write('\r\n$ ');
    }
    runFakeTerminal();
});
</script>
</body>
</html>

支持 0 反对 0 举报

2021-11-28 10:02

@redandblack

跟着新文档走呗，我正好有个vue.js项目用到了，你可以参考一下：Cloush

支持 0 反对 0 举报

2021-11-28 10:28