469,317 Members | 1,987 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,317 developers. It's quick & easy.

Bookmarklet copy & paste that preserves formatting

Hi,

I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.

Any pointers on how this could be done? Are there any examples that I
can look at?

Amir

Jun 5 '07 #1
7 2588
On Jun 5, 3:25 pm, Amir Michail <amich...@gmail.comwrote:
Hi,

I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.

use
getSelection().getRangeAt(0).cloneContents();
to clone the contents of current selection then append it to your rte.

if you want the HTML then append the cloned contents to an element
(e.g. div) and use innerHTML property to get the HTML

Jun 6 '07 #2
scripts.contact wrote:
On Jun 5, 3:25 pm, Amir Michail <amich...@gmail.comwrote:
>Hi,

I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.


use
getSelection().getRangeAt(0).cloneContents();
to clone the contents of current selection then append it to your rte.

if you want the HTML then append the cloned contents to an element
(e.g. div) and use innerHTML property to get the HTML
OK, since *you* brought it up. ;)

Can you explain what the hell a range is for?

Why would you need to addRange?

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jun 7 '07 #3
-Lost wrote:
scripts.contact wrote:
>On Jun 5, 3:25 pm, Amir Michail <amich...@gmail.comwrote:
>>Hi,

I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.


use
getSelection().getRangeAt(0).cloneContents();
to clone the contents of current selection then append it to your rte.

if you want the HTML then append the cloned contents to an element
(e.g. div) and use innerHTML property to get the HTML

OK, since *you* brought it up. ;)

Can you explain what the hell a range is for?

Why would you need to addRange?
I have thought on this some, and think I may have an example of its usage.

Let's say you provide the user with the ability to click multiple
paragraphs and do something with them.

You would need to addRange on a per-paragraph basis, right?

Jeez, I gotta' stop replying to myself.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jun 7 '07 #4
On Jun 5, 3:25 pm, Amir Michail <amich...@gmail.comwrote:
Hi,

I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.
use
var c=getSelection().getRangeAt(0).cloneContents();
method to clone the contents of current selection then append it
anywhere using appendChild(c).

If you wand to get the HTML of selection then just append the content
in a DIV and use innerHTML property

Jun 8 '07 #5
On Jun 8, 5:20 am, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Jun 5, 3:25 pm, Amir Michail <amich...@gmail.comwrote:
Hi,
I would like to add a submission bookmarklet to my app that takes the
current selection and pastes it into the app's rich text editor while
preserving formatting. It should work in at least Firefox & IE.

use
var c=getSelection().getRangeAt(0).cloneContents();
method to clone the contents of current selection then append it
anywhere using appendChild(c).

If you wand to get the HTML of selection then just append the content
in a DIV and use innerHTML property
I still don't understand the mechanism for copying the selection to
a RichTextArea widget in a gwt app via a bookmarklet.

Clicking on a bookmarklet normally redirects to an app url along with
some additional parameters added.

So maybe I need to get the selection as html first and add that html
to the
end of the url? Or is there some other way?

Amir

Jun 8 '07 #6
On Jun 8, 7:30 am, Amir Michail <amich...@gmail.comwrote:
>
I still don't understand the mechanism for copying the selection to
a RichTextArea widget in a gwt app via a bookmarklet.
try this :
<script>
function copyCont(){
var ifr=document.getElementById("s");

ifr.contentDocument.body.appendChild(getSelection( ).getRangeAt(0).cloneContents())
}
</script>
<iframe id="s" onload="this.contentDocument.designMode='on';"></
iframe>
<div>content<bcontent</b<icontent</i></div>
<button onclick="copyCont()">Copy contents of selection in IFRAME</
button>
Clicking on a bookmarklet normally redirects to an app url along with
some additional parameters added.

So maybe I need to get the selection as html first and add that html
to the
end of the url? Or is there some other way?

what is the URL ?

Jun 8 '07 #7
On Jun 8, 3:35 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Jun 8, 7:30 am, Amir Michail <amich...@gmail.comwrote:
I still don't understand the mechanism for copying the selection to
a RichTextArea widget in a gwt app via a bookmarklet.

try this :
<script>
function copyCont(){
var ifr=document.getElementById("s");

ifr.contentDocument.body.appendChild(getSelection( ).getRangeAt(0).cloneContents())
}
</script>
<iframe id="s" onload="this.contentDocument.designMode='on';"></
iframe>
<div>content<bcontent</b<icontent</i></div>
<button onclick="copyCont()">Copy contents of selection in IFRAME</
button>
The gwt app may not be open when the user clicks on the bookmarklet.

Moreover, if the bookmarklet opens it and tries to access the rich
text editor therein, won't that be a security violation?
Clicking on a bookmarklet normally redirects to an app url along with
some additional parameters added.
So maybe I need to get the selection as html first and add that html
to the
end of the url? Or is there some other way?

what is the URL ?
This is for my Study Stickies gwt app:

http://studystickies.com

Currently, the bookmarklets look like this (but they do not preserve
formatting in selections):

Add Resource
============

javascript:t=document.title;u=document.location.hr ef;s=(document.getSelection)?
document.getSelection():document.selection.createR ange().text;location.href='http://
studystickies.com#?cmd=add_resource&title=' + encodeURIComponent(t)
+'&url='+encodeURIComponent(u)+'&selection='+encod eURIComponent(s);

Add Sticky
==========

javascript:t=document.title;u=document.location.hr ef;s=(document.getSelection)?
document.getSelection():document.selection.createR ange().text;location.href='http://
studystickies.com#?cmd=add_sticky&title=' + encodeURIComponent(t)
+'&url='+encodeURIComponent(u)+'&selection='+encod eURIComponent(s);

Amir

Jun 8 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Tomomichi Amano | last post: by
3 posts views Thread by Rachel Suddeth | last post: by
6 posts views Thread by NuB | last post: by
2 posts views Thread by al_johnson222 | last post: by
1 post views Thread by Grant Smith | last post: by
reply views Thread by Tom | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.