0

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>

  1. 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.

  2. 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?

Thomas
  • 6,325
  • 4
  • 30
  • 65
  • 1
    I messed around with the idea of copying the contents of the li the user has clicked on in a fiddle for a while, uses jquery/lacks some functionality so I won't paste as an answer, but it might be of some use to you. I cribbed the insertAtCaret from this answer http://stackoverflow.com/questions/5203428/inserting-text-after-cursor-position-in-text-are%D0%B0, jsfiddle I was messing around with is http://jsfiddle.net/ngr70o5q/3/, essentially it works by catching the paste event from "Cntrl + V", if a list item is selected, insert that text, if nothing selected, paste from actual clipboard. – SubjectCurio Oct 20 '14 at 15:53
  • Thanks, this could be a third approach which actually works. I didn't think of capturing the paste event instead... – Thomas Oct 21 '14 at 06:18

0 Answers0