Hello every1,
I have a "<DIV" tag with contenteditable turned on. I am using this as
an area that users can either paste or drag/drop text into. The text
can come from other browser windows and of course can contain HTML.
Users will typically just click CTRL+A to select an entire web page and
then either copy/paste or drag/drop into this div. There's really no
code for all this other than specifying "contenteditabl e" in the div
Tag, and some other code I've added that will conditionally move these
contents to a hidden field so that my codebehind can get to it (i'm
using VB .net). This part works great EXCEPT when whatever the user
copies contains a "<FORM" tag. This will then cause my hidden field
in the codebehind to see a "blank" value inb the hidden field.
I tried simply removing or replacing the form tags once the contents
had been pasted/dropped, but this does not work. I did determine
however that if this replacement takes place BEFORE anything gets
dropped into the div, then my codebehind sees the value just fine.
This is where my attempt to use "dataTransfer.g etData" comes into play.
It appears I can only specify 'text' or URL' as a parameter, which does
me no good since it strips out all the HTML. I'd like to be able to
specify something like dataTransfer.ge tData('HTML') so that I can do a
replace before allowing the contents to paste into the div.
1) Is this possible?.
2) If not, has anyone else come across the problem with the form tags,
and is there some other approach I might try?
target browser is I.E. 6.xxx
Thanks for any help.
The code below is just my experimenting but perhaps it may help:
(in this example I'm actually using a textbox instead of a hidden
field. Results are the same):
function UpdRichText(){
//replace any form tags with xform. needed so hRichText doesn't
return an empty string
var oDiv = document.getEle mentById('oDiv' );
if(window.event .type == 'dragenter' || window.event.ty pe ==
'beforepaste'){
alert(queryInte rface(window.ev ent.dataTransfe r));
oDiv.innerHTML =
window.event.da taTransfer.getD ata('Text').rep lace(/\<form/gi,"<xform");
oDiv.innerHTML =
window.event.da taTransfer.getD ata('Text').rep lace(/\<\/form/gi,"</xform");
}
document.getEle mentById('xRich TextBox1_oTexta rea').value =
oDiv.innerHTML;
//window.event.da taTransfer.getD ata('Text')
}
<DIV id="oDiv" contentEditable =true
style="WIDTH: 300; HEIGHT: 300; BORDER-RIGHT: #99ccff inset;
PADDING-RIGHT: 3px; BORDER-TOP: #99ccff inset; PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px; OVERFLOW: auto; BORDER-LEFT: #99ccff inset; COLOR:
black; PADDING-TOP: 3px; BORDER-BOTTOM: #99ccff inset;
SCROLLBAR-BASE-COLOR: #99ccff; BACKGROUND-COLOR: white;"
align=left ondragenter="Up dRichText();"
onbeforepaste=" UpdRichText();" ></DIV>
<asp:TextBox ID="oTextarea" Runat="server" Wrap="False"
TextMode="Multi Line" style="WIDTH: 300; HEIGHT: 300;OVERFLOW: auto;
DISPLAY: none;"></asp:TextBox>
