Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Paste and Documentation #344

Closed
goflatworld opened this issue Nov 7, 2016 · 6 comments
Closed

Paste and Documentation #344

goflatworld opened this issue Nov 7, 2016 · 6 comments
Labels
type/documentation Regarding website, API documentation, README, etc.

Comments

@goflatworld
Copy link

goflatworld commented Nov 7, 2016 •
edited
Loading

Details

  • Browser and browser version: All
  • OS version: All
  • xterm.js version: 2.0

Steps to reproduce

Thanks for the code. It is a good terminal simulator. Can you please help on below issues/questions? It would be much appreciated.

I have below code (taken from the example and modified a bit for my application). It works however I can not use paste. I tried the new xterm.js code which was published around 7 days ago, but with new code, it even doesn't show the terminal. I tried to find out more documentation about this package on how to use the xterm.js but no luck...

Here is what I have done:

  1. Download the code, save the code to the web home folder.

  2. Wrote below simple HTML file to use the xterm.js

  3. I see people talked about build the xterm.js. This really confused me.... I thought that Javascript doesn't need any extra work apart from include it in my file?
    ........................................................................

    <!doctype html>

    <title>Stingray Solution</title> <script> var hash= "\n"; </script> <script src="xterminal.js/dist/xterm.js" ></script> 
     <script src="xterminal.js/addons/attach/attach.js" ></script>
 <script src="xterminal.js/addons/fit/fit.js" ></script>
 <script src="xterminal.js/addons/fullscreen/fullscreen.js" ></script>
    <script src="main.js" defer ></script>

........................................................................

Below is the main.js

........................................................................

var term,
protocol,
socketURL,
socket,
pid,
charWidth,
charHeight;

var terminalContainer = document.getElementById('terminal-container');

createTerminal();

function createTerminal() {

while (terminalContainer.children.length) {
terminalContainer.removeChild(terminalContainer.children[0]);
}

term = new Terminal({
cursorBlink: true
});
protocol = 'wss://';
socketURL = 'wss://www.flatworld.com:443';

term.open(terminalContainer);
term.fit();

var initialGeometry = term.proposeGeometry(),
cols = 80,
rows = 30;

charWidth = Math.ceil(term.element.offsetWidth / cols);
charHeight = Math.ceil(term.element.offsetHeight / rows);

  if (window.WebSocket === undefined)
  {
    state.innerHTML = "sockets not supported";
    state.className = "fail";
  }
  socket = new WebSocket(socketURL);
  socket.onopen = runRealTerminal;
  socket.onclose = onClose;
  socket.onerror = onError;
}


function runRealTerminal() {
term.attach(socket);
term._initialized = true;
socket.send("C");

term.on('key', function (key, ev) {
var printable = (
  !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
);

var message ="A" + key;

socket.send(message);

});

term.on('paste', function (data, ev) {
socket.send(data);
});
}

function onClose()
{
term.write("\rDisconnected from server.");
}

function onError()
{
term.write("\rFail: ");
term.write("Communication error");
}

........................................................................
@goflatworld goflatworld changed the title Windows size and paste / Documentation Paste and Documentation Nov 7, 2016
@parisk parisk added the type/documentation Regarding website, API documentation, README, etc. label Nov 7, 2016
@goflatworld
Copy link
Author

I can not use paste, can you please let me know if there are any example code/fix for my code?

@parisk
Copy link
Contributor

parisk commented Nov 8, 2016

Hi @goflatworld, if you are attaching a socket on your terminal using the attach addon, this should work fine out of the box.

If this does not work for you, can you please:

  1. Send us any console logs emitted by your browser
  2. Upload all your files somewhere (e.g. Gist) and share them here, in order to get a more holistic view?

@goflatworld
Copy link
Author

Hi @parisk,

I don't have the console log at the moment, I'll try to get it when I can access the device. I have uploaded the relevant code to below URL.

https://github.com/goflatworld/xtermjs

In the PHP file, it includes multiple files however all these included files (except the attach.js) are included in the xterm.js 2.0. I only modified attach.js a bit to suit my needs and I have attached that js to the source code as well. Please let me know if you need anything else.

Thanks

Thanks

@goflatworld
Copy link
Author

goflatworld commented Nov 9, 2016 •
edited
Loading

Here is what I tried in the browser:

  1. In firefox and chrome, the developer tool console doesn't show anything.
  2. In Firefox, right click popup a normal menu with "save page as" and other menu items (just like you right click a non-editable area in the web page. There is no paste option.
  3. In Chrom, right click has a "paste" option but paste doesn't work.
  4. In IE, when I right click, I got below error message in console:

SCRIPT5022: IndexSizeError

File: xterm.js, Line: 484, Column: 7

And the code is as below. It points to r = s.getRangeAt(0);

var s = document.getSelection(),
sText = prepareTextForClipboard(s.toString()),
r = s.getRangeAt(0);

@parisk
Copy link
Contributor

parisk commented Nov 11, 2016

Thanks for sharing @goflatworld. This issue got fixed in #332 (this is where the criminal line got removed 😅 ).

Please update your version of xterm.js to 2.1.0, which got released this week and everything should be fine.

I am closing this issue now, but feel free to drop any other comments or re-open it if this issue continues to exist.

@parisk parisk closed this as completed Nov 11, 2016
@goflatworld
Copy link
Author

goflatworld commented Nov 12, 2016 •
edited
Loading

Thanks Parisk for updating this.

I have tested the new code and I'm sorry to let you know that paste still doesn't work for me.

Below is my testing result:

  1. All browser (IE, Firefox and Chrome) right click shows the "paste" option except on Windows Firefox.
  2. On Windows Firefox, right click popup a normal menu with "save page as" and other menu items (just like you right click a non-editable area in the web page. There is no paste option.
  3. I could copy, but when I "paste", it didn't paste to the terminal, I could paste to somewhere else.
  4. Browser console doesn't show any log when I tried copy and paste.

Do you mind double check my code to see if it has any issue? Do you mind post an example which shows that paste works?

@goflatworld goflatworld mentioned this issue Nov 20, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type/documentation Regarding website, API documentation, README, etc.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@parisk @goflatworld