這個終端插件通常與websocket一起使用。
下載地址：https://pan.baidu.com/s/1WbyLNOYbwwikOi_iMU7oKA
文檔地址：https://xtermjs.org/docs/api/terminal/classes/terminal/#ondata
提取碼：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>