Xshell 前端编辑器

xtermjs 是前端类型于 Xshell 编辑器

一、插件下载

xtermjs 官网地址:https://github.com/xtermjs/xterm.js

二、使用

在 HTML 页面中引入 xterm.js 插件即可:


<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>

你可能感兴趣的:(JavaScript)