xtermjs 是前端类型于 Xshell 编辑器
一、插件下载
xtermjs 官网地址：https://github.com/xtermjs/xterm.js
二、使用
在 HTML 页面中引入 xterm.js 插件即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/xterm.css" />
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/xterm.js"></script>
<script src="js/fit.js"></script>
</head>
<body>
<!--容器-->
<div id="console"></div>
<script>
// 提示信息（主机名称）
var shellprompt = '[root@swarm_41 ~]# ';
// 高度自适应
$("#console").css("height", document.documentElement.clientHeight);
// 创建对象
var terminalContainer = document.getElementById('console');
var term = new Terminal({
cursorBlink: true, // 设置光标是否闪烁
scrollback: parseInt(50), // 设置可以回查多少行
tabStopWidth: 4 // 设置Tab键
});
// 加载
term.open(terminalContainer);
term.fit();
term.write(shellprompt);
// 设置起始下标位置
term.prompt = function() {
term.x = 0;
};
// 监听键盘
term.on('key', function(data, ev) {
var printable = (!ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey);
if(ev.keyCode == 27) { // ESC，需要向服务器发送数字（27）
} else if(ev.keyCode == 9) { // TAB，需要向服务器发送字符串（"\t"）
} else if(ev.keyCode == 8) { // 回退
if(term.x > 19) {
term.write('\b \b');
}
} else if(ev.keyCode == 67) { // CTRL + C，需要向服务器发送数字（3）
} else if(ev.keyCode == 90) { // CTRL + Z，需要向服务器发送数字（26）
} else if(ev.keyCode == 86) { // CTRL + V，需要向服务器发送数字（22）
} else if(ev.keyCode == 13) { // 回车
term.prompt();
} else if(printable) {
term.write(data);
}
});
// 换行
term.prompt = function() {
term.write('\r\n' + shellprompt);
};
</script>
</body>
</html>
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
