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.
Related
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.
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.
When I copy and paste from my app into word, it maintains the css styles.
This is only an issue from chrome.
Is there a workaround for this?
For both Ctr+C and from Context menu?
You can press CTRL + T immediately after pasting in Word to keep only text.
The default paste options in Word can also be configured to keep only text.
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.
I am using FCK Editor and when I try to paste some code from word in the editor, I get some pop up messages as follows:-
1)"Because of your browser security settings,the editor is not able to access your clipboard data directly. You are required to paste it again in this window.
Please paste inside the following box using the keyboard (Ctrl+V) and hit OK."
2) "The text you want to paste seems to be copied from Word. Do you want to clean it before pasting?"
These two messages are displayed on two different machines.
I don't want both these popups. I want to allow user to paste text from word without these popups
Please provide me a solution to resolve this issue, so that I can paste text from word files also.
Thanks in advance.
These pop-ups are there for a reason. Getting content from the clipboard is rightly generally impossible in JavaScript so browser-based rich text editors have to work round this as best they can. I know that CKEditor (FCKeditor's replacement) uses a trick that redirects a user paste to an offscreen element, which gives the editor access to pasted content before it's inserted into the editor; I think this trick may not be implemented in FCKeditor, so you may want to consider trying CKEditor.
Try this add-on for Firefox
https://addons.mozilla.org/en-US/firefox/addon/allowclipboard-helper/
Reference: http://support.mozilla.org/questions/754412