Javascript that edits the clipboard string - javascript

I often have to copy/paste a numeric string but sometimes there are dots or spaces in them. I need to write a script that edits my clipboard string:
- It needs to remove all the dots
- It needs to remove all the spaces/EOF's
- It needs to put all the remaining numbers together and put it back in the clipboard
I'm no scripting king, I've found some useful code but I have no idea how to put all that together.
Example:
- The string " 12345.67" is in my clipboard.
- I need a script that changes this to "1234567" and puts it right back in the clipboard.

It's not possible to access the clipboard using Javascript except in IE.
Therefore, the user will have to initially copy and paste the contents of their clipboards, and then you can use some JS to change the content and copy it back into the clipboard.

Related

Confused about copy / paste behavior into excel from my React JS site when tabs are involved?

I'm working on a site and one of the features is to copy some text to the clipboard so that the users can paste this text into their excel spreadsheets. What they'd be copying to the clipboard is actually multiple values delimited by tabs so that when they copy into excel (assuming they kept the default text to columns functionality) it would split the text into multiple cells.
For example, I have this:
getCopyText() {
return `a \t b \t b \t ${FAKE_FORECAST_VALUE} \t d \t e`
}
render() {
return (
....
<CopyToClipboard text={this.getCopyText()}>
<Button">
Copy to Clipboard
</Button>
</CopyToClipboard>
...
)
}
When I click the button to copy the text to the clipboard and paste it into Excel though, it doesn't seem to respond to the tabs and it just looks like spaces (also doesn't separate values into columns).
To sanity check, I tried pasting the original clipboarded string into Word and turned showing tab characters on. It showed the tab characters.
I then copied the pasted string from Word into Excel. I was confused to see that if I copied the string from Word (which was just pasted from the clipboard) into Excel, it would respond to the tab characters and split the text into multiple columns.
So in summary:
Copying to clipboard -> Pasting into Excel = doesn't seem to preserve tabs, doesn't split values into columns, doesn't work
Copy to clipboard -> Pasting into Word (preserves tabs) -> Copying the pasted string from Word into Excel = preserves tabs, splits values into columns
Of course, I don't want the users to have to paste the string somewhere else and recopy it before being pasted into Excel but I'm pretty stumped about what's going on here, especially since it looks like the tab characters are in the string (can be seen when pasting from clipboard into Word or from clipboard into vim / notepad etc). Is there something I could do from the JS side of things or something to put in the string to help with this so the user doesn't have to deal with it?
A day or two after I posted this question, I actually found this person's answer which helped explain what was actually going on: here. I'm still not totally sure if / how it explains how pasting to Word and then copying from there into Excel works though.
However, I did want to point out that for my specific use case, I got the copy to clipboard -> paste to excel functionality working by making sure that plain text was copied to the clipboard instead of it being detected as HTML.
Since I was using the CopyToClipboard dependency (React variety), this was just a matter of adding in an option that lets you specify that text should be copied as text/plain.
CopyToClipboard options: The description of the option.format: String. Optional. Set the MIME type of what you want to copy as. Use text/html to copy as HTML, text/plain to avoid inherited styles showing when pasted into rich text editor.

How to paste Text from Word to plain text by preserve defined styles?

I want to let the user paste text to an editor (currently CKEditor). By pasting the text all styles and elements which are not white-listed must be removed, including images, tables etc. So 90% should be converted to plain text or be removed while some simple styles like bold, italic or underlined should be preserved.
Didn't thought that's so complicated. But all I can find within the documentation and the samples of CKEditor is about pasting complete plain text or pasting cleaned up content from Word without the ability to configure a white-list (and even if I remove all table-related plugins it is still possible to paste a table from MS WorD).
I really, really appreciate any hint.
Thanks.
You can't without writing your own parser. Another issue is MS word uses Windows-1252 character encoding and most of the web uses UTF-8 encoding, so if you paste from WORD and transmit this data via AJAX, it will be garbled.
While Dreamweaver has a pretty good "paste from word" feature, it's unlikely you'll find an online equivalent. This is a huge and complex problem that would be an application in itself. Even WORD's "save as HTML" can't even do a decent job of it.
Sadly, what most have to do, is strip it all down to ASCII (paste into Notepad), put it in the editor and mark it back up.
You can add a listener for the 'paste' event in the editor instance: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#event:paste
That way you get the HTML that it's gonna get pasted and you can perform whatever clean up you need (for example based on inserting that html into a div and then work with the DOM, or using regexps on the string).
Found a solution:
Listening to the paste event as AlfonsoML wrote.
Sending the pasted content of Word to the server.
Parsing it with the HTML Agility Pack.
Sending it back to the client.
Inserting it within the editor.

How to Copy to Clipboard in JavaScript and make it HTML?

I found some nice solutions here on how to copy text in JavaScript to the clipboard in:
How do I copy to the clipboard in JavaScript?
But is there any way to give it a type? Want I want is to paste to clipboard something like:
this is < b >bold< /b >
and when pasting it into OpenOffice or Word, get
this is bold
You could just manipulate the string the user selects before sending it to the clipboard. Refer the answer for this question which shows how a string manipulation could be done before copying it to the clipboard.

How do some WYSIWYG editors keep formatting of pasted text?

How do some WYSIWYG editors keep formatting of pasted text? As an example, I copied italic red text from a text-editor into a WYSIWYG and it kept the text's color and style, how is this happening? For the longest I thought JavaScript had access the clipboards text only. Is this not the case? If so then, what is it?
There's a content type negotiation between the source and target during the copy/paste operation. It happens sort of like this:
You copy something into the copy and paste buffer. The copied data is tagged with, more or less, a MIME type and who put it there.
When you paste, the paste target tells the copy-and-paste system that it understands a specific list of MIME types.
The copy-and-paste system matches the available formats to the desired formats and finds text/html in both lists.
Someone (probably the original source of the data) then converts the paste buffer to text/html and drops it in the editor.
That's pretty much how things worked back when I was doing X11/Motif development (hey! get off my lawn you rotten kids!) so I'd guess that everyone does it pretty much the same way.
JavaScript has no direct access to the clipboard in general. However, all major browsers released over the past few years have a built-in WYSIWYG editing facility, via the contenteditable attribute/property of any element (which makes just that element editable) and the designMode property of document objects (which makes the whole document editable).
While the user edits content in the page, if they trigger a paste (via keyboard shortcuts such as Ctrl + V or Shift + Insert or via the Edit or context menus), the browser automatically handles the whole pasting process without any intervention from JavaScript. Part of this process includes preserving formatting wherever possible.
However, the HTML this produces can be gruesome and varies heavily between browsers. Many WYSIWYG editors such as TinyMCE and CKEditor employ tricks to intercept the pasted content and clean it before it reaches the editor's editable area.
What you're seeing is a rich text editor. There's some information in this Wikipedia article: http://en.wikipedia.org/wiki/Online_rich-text_editor
I think it copied the selected DOM instead

CKEditor force paste from word?

I have a application using the CK editor, where users typically paste content from word.
When the paste from word function is used, then the content is cleaned properly. The problem is with users not using paste from word, then the HTML gets into a state that our application can't clean.
Has anyone found out a way of either forcing using paste from word for word content or automatically apply the logic used when paste from word, even if paste is directly into editor?
I would not like to completely turn off paste into the editor directly, rather I'd like to detect a word paste and then clean the data (as paste from word), or disallowing a paste from word but allowing normal text paste.
I'm using version 3.0.1 CK editor
Figured out that this was included in version 3.1 of CK Editor, then all paste in to normal edit window is passed through the word clean up function.

Categories