Js 之终端插件

这个终端插件通常与websocket一起使用。

下载地址：https://pan.baidu.com/s/1WbyLNOYbwwikOi_iMU7oKA

提取码：6mc7

一、效果图

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xterm.js</title>
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css">
    <script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
    let term = new Terminal({
        cursorStyle: 'underline', //光标样式
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        theme: {
            foreground: 'yellow', //字体
            background: '#060101', //背景色
            cursor: 'help',//设置光标
        }
    });
    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');
        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);
            }
            console.log(e.key);
        });
    }

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

猜你喜欢