web-termjs
Terminal emulator for browsers
This repository got inspired by SDA/terminal
Quickstart
Browser
Download or clone this repository or the dist folder and add it to your project.
Add following to the head in your HTML file:
<link href="/path/to/web-termjs/dist/terminal.min.css"><script src="/path/to/web-termjs/dist/terminal.min.js"></script>
Add a container which will hold the terminal like this:
<body> <div id="terminal"></div></body>
Add another script after the terminal.min.js
(in <script>
tags or in a extra file) and add following example:
var container = document.getElementById('terminal');var term = new terminal.Terminal({ welcome: 'Hi! :D', prompt: '', separator: '$', theme: 'dark' }) .openIn(container) .onCommand(commands); function commands(cmd, args, stream) { if (cmd === 'test') { stream.write('succeed'); } stream.close();}
Or just run the index.html
in example folder.
NodeJS
Download the package from NPM.
npm install --save web-termjs
Then import it and create the terminal.
JavaScript
const Terminal = require('web-termjs').Terminal; const term = new Terminal() .openIn(...) .onCommand(...);
TypeScript
import { Terminal } from 'web-termjs'; const term: Terminal = new Terminal() .openIn(...) .onCommand(...);
Angular 5 Example
app.component.html
<div #terminal></div>
app.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';import { Terminal, Stream } from 'web-termjs';import { Options } from 'web-termjs/lib/options'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent implements AfterViewInit { @ViewChild('terminal') terminal: ElementRef; term: Terminal; ngAfterViewInit() { const options: Options = { welcome: 'Hello!', prompt: '', separator: '>', theme: 'light' }; this.term = new Terminal(this.terminal.nativeElement, this.onCommand, options); } onCommand(cmd: string, args: string[], stream: Stream) { stream.write('Ok!'); stream.close(); }}
Custom Themes
Create a CSS file with following content which you can specify (with examples):
# Font.terminal-custom-name { color: black; font-family: monospace;} # Links.terminal-custom-name a { color: #000;} # Background.terminal-custom-name .background { background: #fff;} # Styles for the whole container.terminal-custom-name .background .term-container { text-shadow: none; padding: 4px;} # Prompt.terminal-custom-name .prompt { color: #02f;}
Add this CSS file after terminal.css
to your project.
Then you can define your theme in the options parameter
theme: 'custom-name'
or set it with
term.setTheme('custom-name');
API
class Terminal
constructor
constructor(options: Options)
options
has a default value:
{ welcome: '', prompt: '', separator: '$', theme: 'dark'}
theme
theme: string
Getter and setter of the theme
prompt
prompt: string
Getter and setter of the prompt
container
container: HTMLElement
Getter of the container
clear
clear(): void
Clears the screen.
close
close(): void
Removes the terminal from the website.
openIn
openIn(container: HTMLElement): Terminal
Sets the container by the given parameter and starts it.
onCommand
onCommand(exec: (cmd: string, args: string[], stream: Stream) => any): Terminal
Sets the function which will be called when a command has entered.
class Stream
write
write(html: string): void
Prints the given text (can be html style) into the terminal. If you closed the stream you can't write into the terminal anymore.
close
close(): void
Closes the stream. After this a new prompt appears.
interface Options
welcome: string
Will be shown on initialize terminal.
prompt: string
Will be shown on every input at the beginning.
separator: string
Separator between prompt and input.
theme: string
Name of theme.
License
Copyright 2017 Daniel Däschle
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.