I have a small templating webapp, where the authors can add placeholders within their richttext editor. To prevent errors I want to provide a list of valid placeholders which then can be copied and pasted. My problem here is the way I can restrict what get's copied.
I tried two approaches, both failed.
First of all how the list of placeholders looks like:
<ul class="placeholders">
<li>${address.name}</li>
<li>${address.street}</li>
<li>${address.city}</li>
<li>${address.zip}</li>
</ul>
Copy to clipboard with JS:
This doesn't work as the clipboard cannot be accessed because of security concerns. I tried the ZeroClipboard but it's documentation is not clear for me and even the examples I found here at SO weren't helpful. I want to copy the content of the <li> if the user clicks on it. I tried to set instantiate with new ZeroClipboard(jQuery('ul.placeholders li'). But this didn't work at all. In Firefox as soon as I hover over an li the loading wheel appears.
Just select the whole text with a range object:
This basically works with the selection, but when I paste it in the Rich Text Editor, Firefox und IE also paste the li tag. Again as I don't have access to the clipboard I can't control, what gets copied. And as it is a RTE, I don't have much control over how it gets pasted.
Has anyone an idea on how I could make either of the approaches work?
Related
I've got a script that deals with pasted text in a text area. I would like to write some tests for it. The first step would be to copy some text in the clipboard so after reading a lot about the topic I ended up with something like this:
Add a text Area to the DOM with the text you want to copy.
Add a button to the DOM that runs document.execCommant("copy") on click.
Remove the text area & the button from the DOM.
Please take into account before marking this question as a duplicate, that all the other solutions I've seen involve the user performing the click action. I am asking about how to do this strictly programmatically.
document.execCommant("copy") does not work if it's not triggered by any user action due to security reasons. In my case, the tests are clicking on the button, but document.execCommant("copy") simply won't work.
Is there any way of doing this without using any new libraries? (jQuery is fine).
I am interested in a solution that works on Chrome/Firefox.
Here you can see a fiddle with the step I mentioned above: https://jsfiddle.net/7b40ma0q/
I am in the process of creating a chrome extension that allows you to click on context menu options when you are in an editable element. Clicking a context menu option automatically places some text where the cursor is.
The problem I am having is that the process for placing the text differs based on where the text is being placed. For example, If the text is being placed in a textarea, (like the one I am typing in now), the process is different than if I need to put the text in, say, a YouTube comment box, which is its own custom div and does not support the operations that I would use when editing the contents of a normal textarea
In my search for a flexible solution that would work the same for all elements that are in the editable category of the chrome.contextMenus API, I thought of the following Idea:
I should be able to do what I want if I store my variable in the system clipboard with document.execCommand('copy') and then paste it in wherever the cursor is with document.execCommand('paste')
The downside here is that the user would loose whatever they used to have in their clipboard.
I originally planned on just pasting the original contents into my own textarea, then restoring it once I am done with the clipboard, but there are 2 problems with this approach:
The user would loose whatever formatting they had originally
This would only work for text, not images.
Is there a way that I can save the contents of the clipboard that would allow me to copy them back to the clipboard at later time without the user noticing any modification to the content?
If I have any glaring misconceptions, please correct me as I am new to
JS, the DOM and HTML
Im using zclip as a way of allowing a user to copy data to their clipboard.
One way Im using this is to return a HTML formatted table of data. When pasting this into an email though, it pastes the HTML code. However if I copy the data from a webpage and paste that into an email, it inserts rendered HTML.
So how is this difference determined? Is there something I can set / add in the data being copied that will tell clipboard to treat it like a copy from a web page rather than plain text?
The end goal is to allow a user to click a button and then be able to paste some nicely formatted HTML into an email.
Found out the reason for this...
Clipboard contains a heap of different possible formats. So when you copy from a webpage for instance, you actually get a plain text version, a rich text version and the html version (maybe more). When you then paste, the program you're pasting into decided which is the most applicable format.
zClip only fills in the plain text version of the clipboard.
Has anyone tried the LMC Button before? I initially wanted to use ZeroClipboard as it is the most popular script around for copy to clipboard function, but it just doesn't work in my wordpress for some reason. LMC button works perfectly except for one little flaw - it can only copy codes that are shown on page load.
This doesn't make sense for me as I have a dynamically generated message I need to copy to my clipboard. Go to the link above to check out his demo and you will find the same thing. Change the input and click 'copy', it will not copy what you typed.
On further note, I cannot use ctrl-c as I need to add some codes into the text before being copied. Please don't make this suggestion.
I'm trying for two days now several JavaScript lightweight Rich Text Editors (rte) such as nicEdit, mooEditable, MooRTE (the two last ones were considered because they use the mootools framework which I'm using for this project).
My problem is that with all of them, when I copy a pre-formated text from a web page (with words in bold, links etc...) and then paste it into the editor, it appears already formated.
This could be nice but that's a security problem because if I copy/paste a whole web page it will render the whole web page in the editor.
I just want my users to be able to do some basic formatting with the editor such as putting some text in bold, italic, add a link and indent their paragraphs.
An alternative could be showdown (which - I would bet - is used by stackoverflow), because this type of editors (with a preview box) don't suffer from the aforementioned issue (when you paste something in the textarea, it is unformatted text).
However, I'm not sure this would be appropriated to my case because the editor would be used to write long articles (much longer than most of the stackoverflow posts). In that case I think it would be better to have a proper editor that renders things instantly (I mean right in the textarea, not in a preview box). And a real WYSIWYG editor is more enticing and easy to use, in my opinion.
Is there a easy way to modify a RTE so that when I paste some text it is rendered unformatted?
Or do you think I should use the sort of solution that stackoverflow uses? (showdown or similar) Or do you know a RTE that doesn't have the copy-paste issue that I mentioned?
Note that I didn't try CKeditor, FCKEditor and TinyMCE because they are far too complex(heavy) and the one from YUI looks good but needs the whole library to work.
Thanks,
FuzzyTern
You are copying from a rich text source and pasting into a rich text destination. By default you will get rich text in the destination. The only way around this is to capture the paste event somehow, redirect the paste operation into a plain text field, then copy the unformatted text out of the plain text field into your rich text destination.
Use the onPaste handler to capture
paste events (doesn't work in
Firefox or Opera)
Use a hidden field to paste the
selected text into.
Insert the value of the hidden field
into the rich destination at the
cursor location.
Not sure where the profit comes from, but there you go.