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

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.

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.

Javascript that edits the clipboard string

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.

how can i copy text from textbox to clipboard using jquery/javascript/html5

I would like to create a copy to clipboard button on a website. However, all the method I found involved a small Flash. Is there a way to create the copy to clipboard button without using Flash?
There is some jQuery plugins like:
http://www.steamdev.com/zclip/
http://archive.plugins.jquery.com/project/clipboard

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.

Copying plain text from a WYSIWYGI to a normal textarea?

I know I did ask this question earlier but here is my problem in details:
if I copy the text from textarea1 to textarea2 using a JavaScript program, it works fine
if I attach the teaxtarea1 with a WYSIWYG editor then it refuses to work. And I am using openWYSIWYG.
Why can't I can copy the plain text from textarea1 when it is attached to a WYSIWYG?
The code I am using for copying it without a WYSIWYG is:
function postChange() {
document.forms["form1"].textarea2.value = document.forms["form1"].textarea1.value;
}
I don't know this "WYSIWYG", although I think I know what you mean. Could it be that when you apply it to a textarea, said textarea's value no longer holds the text? The text is probably in some property of the WYSIWYG object.
Or something.
Can you post a link to the library?
And look what I found in their "Save" code:
WYSIWYG.updateTextArea(n);
Try with that and then get the value of the textarea.
That's because what you see isn't a textarea but an iframe with a full HTML page inside.
There is a hidden textarea, but it doesn't seem to be updated in real time.
The method given by Rew should work (for Firefox, that's contentDocument) but it returns HTML code (generated by the widget), not plain text.
You might want to use body.plainText (instead of body.innerHTML) on Firefox, not sure for other browsers.
Alternatively, check your widget's API to see if they don't offer such plain text access.

Categories