Github url

jquery.terminal

by jcubic

jQuery Terminal Emulator - web based terminal

2.3K Stars 507 Forks Last release: 3 days ago (2.17.5) MIT License 2.6K Commits 188 Releases

Available items

Quck Help

Developer services
$30.00

Code Integration

Developer services
$100.00

New Feature

Developer services
$50.00
\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_ \_\_ / / \_ /\_ \_\_\_\_\_\_\_\_\_\_\_\_ \_/\_\_ \_\_\_/\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_ / / \_\_ / / // / // / \_ / \_/ // / / / \_ / \_/ / / \/ / \_ \/ / / / / // / // / \_\_\_/ // // / / / \_\_\_/ // / / / / /\ / // / /\_\_ \_\_\_/\_\_\_\_ \\_\_/\_\_\_\_/\_/ \_\_ / /\_/\_\_\_\_/\_//\_/\_/\_/\_/\_/ \/\_\_\_\_\_\_/ \/ /\_\_\_\_/ version 2.17.5

http://terminal.jcubic.pl

npm bowertravisCoverage Status downloadsLICENSE MIT

Paid Support

Summary

jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications. It can automatically call JSON-RPC service when a user types commands or you can provide your own function in which you can parse user commands. It's ideal if you want to provide additional functionality for power users. It can also be used to debug your application.

You can use this JavaScript library to create a web based terminal on any website.

Features:

  • You can create an interpreter for your JSON-RPC service with one line of code (just use url as first argument).

  • Support for authentication (you can provide functions when users enter login and password or if you use JSON-RPC it can automatically call login function on the server and pass token to all functions).

  • Stack of interpreters - you can create commands that trigger additional interpreters (eg. you can use couple of JSON-RPC service and run them when user type command)

  • Command Tree - you can use nested objects. Each command will invoke a function, if the value is an object it will create a new interpreter and use the function from that object as commands. You can use as many nested object/commands as you like. If the value is a string it will create JSON-RPC service.

  • Support for command line history, it uses Local Storage if possible.

  • Support for tab completion.

  • Includes keyboard shortcut from bash like CTRL+A, CTRL+D, CTRL+E etc.

  • Multiple terminals on one page (every terminal can have different commands, its own authentication function and its own command history).

  • It catches all exceptions and displays error messages in the terminal (you can see errors in your javascript and php code in terminal if they are in the interpreter function).

  • Using extended commands you can change working of the terminal without touching the front-end code (using echo method and terminal formatting like syntax). Read more indocs

  • Full mobile support

Installation

Include jQuery library, you can use cdn from https://jquery.com/download/

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then include js/jquery.terminal-2.17.5.min.js and css/jquery.terminal-2.17.5.min.css

You can grab the files from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.17.5/js/jquery.terminal.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.17.5/css/jquery.terminal.min.css" rel="stylesheet">

or

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.terminal.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/jquery.terminal.min.css">

If you always want latest version, you can get it from unpkg without specifying version, it will redirect to the latest ones:

<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script><link href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet">

Bleeding Edge Version

If you want to test bleeding edge, development version of jQuery Terminal. You can use those files:

<script src="https://cdn.jsdelivr.net/gh/jcubic/[email protected]/js/jquery.terminal.min.js"></script><link href="https://cdn.jsdelivr.net/gh/jcubic/[email protected]/css/jquery.terminal.min.css" rel="stylesheet">

but it's not refreshed as fast as rawgit was, because it's CDN and need to be propagated to different servers.

Keyboard key polyfill

NOTE: From version 1.0.0 if you want to support old browsers then you'll need to use key event property polyfill. You can check the support for it on can I use (as you can see in chart it's required by Android so it's good to add).

<script src="https://unpkg.com/[email protected]/keyboard.js"></script>

Command Line

You can also install jQuery Terminal using command line, from bower repository:

bower install jquery.terminal

or npm registry:

npm install jquery.terminal

Example of usage

This is code that uses low level function, that gives you full control of the commands, just pass anything that the user types into a function.

jQuery(function($, undefined) { $('#term\_demo').terminal(function(command) { if (command !== '') { var result = window.eval(command); if (result != undefined) { this.echo(String(result)); } } }, { greetings: 'Javascript Interpreter', name: 'js\_demo', height: 200, width: 450, prompt: 'js\> ' }); });

Here is a higher level call, using an object as an interpreter, By default the terminal will parse commands that a user types and replace number like strings with real numbers regex with regexes and process escape characters in double quoted strings.

jQuery(function($, undefined) { $('#term\_demo').terminal({ add: function(a, b) { this.echo(a + b); }, re: function(re, str) { if (re instanceof RegExp && re.test(str)) { this.echo(str + ' [[;green;]match]'); } }, foo: 'foo.php', bar: { sub: function(a, b) { this.echo(a - b); } } }, { height: 200, width: 450, prompt: 'demo\> ' }); });

command

add 2 2

will display

4

(not

22

).

Command

foo

will change prompt to

foo\>

and each new command will execute json-rpc method from foo.php script.

command

bar

will change the prompt to

bar\>

and if you type

sub 10 2

it will display 8. To exit from bar nested command you can type

exit

or press CTRL+D.

command

re /^foo/ foo-bar

will echo: "foo-bar match" where "match" will be green.

By default arguments are required but you can disable the check like this:

jQuery(function($, undefined) { $('#term\_demo').terminal({ add: function(...args) { this.echo(args.reduce((a,b) =\> a + b)); } }, { checkArity: false }); });

And add command will accept any number of argments and it will sum them up (if they are numbers).

You can create JSON-RPC interpreter with authentication in just one line:

$('#term\_demo').terminal('service.php', {login: true});

The rest of the code can be on the server, so you can write fully working application, without any front-end, that can be tested in browser.

First argument to terminal can also be array with objects strings and functions, with one requirement, that only one function can be used as last fallback for commands that was not found in RPC or in objects.

jQuery(function($, undefined) { $('#term\_demo').terminal([{ add: function(...args) { this.echo(args.reduce((a,b) =\> a + b)); } } 'foo.php', function(command) { this.echo("You've typed " + command, {formatters: false, exec: false}); }], { checkArity: false }); });

More examples here. You can also checkFull Documentation orGetting Started Guide on Wiki.

Security

Because of security in version 1.20.0 links with protocols different than ftp or http(s) (it was possible to enter javascript protocol, that could lead to XSS if author of the app echo user input and save it in DB) was turn off by default. To enable it, you need to use

anyLinks: true

option.

In version 1.21.0 executing terminal methods using extendend commands

[[terminal::clear()]]

was also disabled by default because attacker (depending on your application) could execute

terminal::echo

with raw option to enter any html and execute any javascript. To enable this feature from this version you need to use

invokeMethods: true

option.

The features are safe to enable, if you don't save user input in DB and don't echo it back to different users (like with chat application). It's also safe if you escape formatting before you echo stuff.

If you don't save user input in DB but allow to echo back what user types and have enabled

execHash

options, you may have reflected XSS vulnerability if you enable this features. If you escape formatting this options are also safe.

NOTE: To disable exec if you have

execHash

(or echo stuff from users with

invokeMethods: true

), you can also set option

{exec: false}

to your

echo

call and use it only when you get values from server (not from DB indireclty from users). If you do this you will be able to echo stuff from users and execute terminal methods from server (this feature is mostly done just for that).

Contributors

If you want to contribute read CONTRIBUTING.md first. Here are project contributors:

|
Jakub T. Jankiewicz

commits |
Zuo Qiyang

commits |
Marcel Link

commits |
Sébastien Warin

commits |
Christopher John Ryan

commits |
Johan

commits |
Florian Schäfer

commits | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | |
David Refoua

commits |
Ishan Ratnapala

commits |
Tomasz Ducin

commits |
7twin

commits |
Abdelrahman Omran

commits |
Anton Vasil'ev

commits |
finlob

commits | |
Hasan

commits |
Hraban Luyat

commits |
Jarry Shaw

commits |
Jon Steinich

commits |
Martin v. Löwis

commits |
Mateusz Paprocki

commits |
exit1

commits | |
Robert Wikman

commits |
Steve Phillips

commits |
Yutong Luo

commits |
coderaiser

commits |
mrkaiser

commits |
stereobooster

commits |
Steve Kirkegard

commits | |
Juraj Vitko

commits | <!-- CONTRIBUTORS-END -->

jQuery Terminal Website contributors:

|
Jakub T. Jankiewicz

commits |
Marc Laporte

commits |
Rich Morin

commits |
DInesh51297

commits |
Logan Rosen

commits | | :---: | :---: | :---: | :---: | :---: | <!-- CONTRIBUTORS-WWW-END -->

Credits

Projects used:

Paid Support

If you have some non-trivial request or need help, you can get paid support at xs:code.

License

Licensed under MIT license

Copyright (c) 2011-2020 Jakub Jankiewicz

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.