Feature-rich Terminal Emulation Plugin - jq-console

jq-console is a simple yet feature-rich and highly customizable terminal emulator for jQuery, which allows you to simulate a linux/unix like environment in the browser.

The goal of the plugin is to create a web terminal simulator that feels as close to a real physical device as possible.

Features:

• Custom styles.
• Keyboard shortcut.
• Command reminder.
• Console history.
• Supports ANSI escape code and SGR(Select Graphic Rendition)

See Also:

• 10 Best Terminal Emulators In JavaScript And jQuery

How to use it:

1. Get started by loading the jq-console plugin's files in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/lib/jqconsole.js"></script>

2. Create an empty DIV to hold the web terminal.

<div id="console"></div>

3. Initialize the plugin. Available parameters:

• welcomeString: Welcome string.
• promptLabel: Prompt label before the input
• continueLabel: Label before the continued lines of the input
• disableAutoFocus: Disable Auto Focus or not

window.jqconsole = $('#console').jqconsole(welcomeString, promptLabel, continueLabel, disableAutoFocus);

4. Apply your own styles to the web terminal.

#console {
  height: 400px;
  width: 750px;
  position:relative;
  background-color: black;
  border: 2px solid #CCC;
  margin: 0 auto;
  margin-top: 50px;
}

.jqconsole {
  padding: 10px;
  padding-bottom: 10px;
}

.jqconsole-cursor {
  background-color: #999;
}

.jqconsole-blurred .jqconsole-cursor {
  background-color: #666;
}

.jqconsole-prompt {
  color: #0d0;
}

.jqconsole-old-prompt {
  color: #0b0;
  font-weight: normal;
}

.jqconsole-input {
  color: #dd0;
}

.jqconsole-old-input {
  color: #bb0;
  font-weight: normal;
}

.jqconsole-composition {
  background-color: red;
}

.jqconsole-prompt-text {
  color: red;
}

5. Register new shortcuts. All available built-in shortcuts:

• Delete: Delete the following character.
• Ctrl+Delete: Delete the following word.
• Backspace: Delete the preceding character.
• Ctrl+Backspace: Delete the preceding word.
• Ctrl+Left: Move one word to the left.
• Ctrl+Right: Move one word to the right.
• Home: Move to the beginning of the current line.
• Ctrl+Home: Move to the beginnig of the first line.
• End: Move to the end of the current line.
• Ctrl+End: Move to the end of the last line.
• Shift+Up, Ctrl+Up: Move cursor to the line above the current one.
• Shift+Down, Ctrl+Down: Move cursor to the line below the current one.
• Tab: Indent.
• Shift+Tab: Unindent.
• Up: Previous history item.
• Down: Next history item.
• Enter: Finish input/prompt operation. See Input() and Prompt() for details.
• Shift+Enter: New line.
• Page Up: Scroll console one page up.
• Page Down: Scroll console one page down.

jqconsole.RegisterShortcut('KEYCODE OR The ASCII code of the first character', function() {
  // do something
});

6. Start a command prompt operation. If another input or prompt operation is currently underway, the new prompt operation is enqueued and will be called when the current operation and all previously enqueued operations finish.

• history_enabled: Whether this input should use history. If true, the user can select the input from history, and their input will also be added as a new history item.
• result_callback: A function called with the user's input when the user presses Enter and the prompt operation is complete.
• multiline_callback: If specified, this function is called when the user presses Enter to check whether the input should continue to the next line. 
• async_multiline: Whether the multiline callback function should be treated as an asynchronous operation and be passed a continuation function that should be called with one of the return values.

jqconsole.Prompt(history_enabled, result_callback, multiline_callback, async_multiline);

7. Start an input operation. If another input or prompt operation is currently underway, the new input operation is enqueued and will be called when the current operation and all previously enqueued operations finish.

jqconsole.Input(function(input) {
  // ...
});

8. More API methods.

// Writes the given text to the console in a span, with an optional class.
jqconsole.Write(text, class, escape=true);

// Sets the number of spaces inserted when indenting.
jqconsole.SetIndentWidth(width);

// Returns the number of spaces inserted when indenting.
jqconsole.GetIndentWidth();

// Registers character matching settings for a single matching
// open: the openning character
// close: the closing character
// class: the html class to add to the matched characters
jqconsole.RegisterMatching(open, close, class);

// Unregisters a character matching.
jqconsole.UnRegisterMatching(open, close);

// Adds a dom node, where any text would have been inserted
jqconsole.Append(node);

// Aborts the current prompt operation and returns to output mode or the next queued input/prompt operation.
jqconsole.AbortPrompt();

// Sets the contents of the prompt.
jqconsole.SetPromptText('text');

// Clears the contents of the prompt.
jqconsole.ClearPromptText(clear_label);

// Returns the contents of the prompt.
jqconsole.GetPromptText(full);

// Replaces the main prompt label.
jqconsole.SetPromptLabel(main_label, continue_label);

// Updates the main prompt label.
jqconsole.UpdatePromptLabel();

// Handles key presses and potentially override internal keypress handler.
jqconsole.SetKeyPressHandler(handler);

// Handles and potentially override control keys (tab, up, down).
jqconsole.SetControlKeyHandler(handler);

// Resets the shortcut configuration.
jqconsole.ResetShortcuts();

// Sets the history
// history: The history buffer to use.
// e.g. ['a = 3', 'a + 3']
jqconsole.SetHistory(history);

// Gets the current history
jqconsole.GetHistory(history);

// Resets the history into intitial state.
jqconsole.ResetHistory();

// Moves the cursor to the start of the current prompt line.
// all_lines: If true, moves to the beginning of the first prompt line, instead of the beginning of the current.
jqconsole.MoveToStart(all_lines);

// Moves the cursor to the end of the current prompt line.
jqconsole.MoveToEnd(all_lines);

// Returns the 0-based number of the column on which the cursor currently is.
jqconsole.GetColumn();

// Returns the 0-based number of the line on which the cursor currently is.
jqconsole.GetLine();

// Gets the current prompt state: input, output, or prompt
jqconsole.GetLine();

// Sets focus on the console's hidden input box so input can be read.
jqconsole.Focus();

// Enables focus and input on the console.
jqconsole.Enable();

// Disables focus and input on the console.
jqconsole.Disable();

// Returns true if the console is disabled.
jqconsole.IsDisabled();

// Dumps the content of the console before the current prompt.
jqconsole.Dump();

// Resets the console to its initial state.
jqconsole.Reset();

// Clear the console keeping only the prompt.
jqconsole.Clear();

---

This awesome jQuery plugin is developed by replit-archive. For more Advanced Usages, please check the demo page or visit the official website.