Js 之终端插件
Posted 样子2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js 之终端插件相关的知识，希望对你有一定的参考价值。
这个终端插件通常与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>
以上是关于Js 之终端插件的主要内容，如果未能解决你的问题，请参考以下文章