Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DTHML edit box ! ?

Status
Not open for further replies.
Bramvg

Bramvg

IS-IT--Management
Jan 16, 2001
135
BE
Hi there,

I have an 'editable' DIV tag where I can copy/paste e.g. a word file, where the layout is kept [bold/italic/tables/...]

The div contains a submit button. This will show the HTML code in a textarea.
All that works fine, the only little problem I encounter is that I cannot pass the information in a form!
I always get an error that the field oTextarea is not defined!?

Anyone any suggestions? You can simply copy/paste the code below.

Tnx in advance!
Bram


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<HTML>
<HEAD>
<TITLE>Editable Regions Sample</TITLE>


<STYLE>
body{
margin:0;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
}
.desbar{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:8pt;
height:105;
}
.title{
font-size:15pt;
color:white;
padding-left:10px;
}
PRE { margin:0}

a:link
{
text-decoration:none;
color:white
}
a:visited
{
text-decoration:none;
color:white
}
a:active
{
text-decoration:none;
color:white
}
a:hover
{
text-decoration:none;
color:yellow
}
BUTTON {cursor:hand; background:#ffffff; border-color:#99ccff; font-weight:bold;}
</STYLE>


<SCRIPT>
function fnToggleEdits(oObj,oBtn) {
currentState = oObj.isContentEditable;
newState = !currentState;
oObj.contentEditable = newState;

newState==false ? oBtn.innerHTML='Editing On' :
oBtn.innerHTML='Editing Off';
}
</SCRIPT>

</HEAD>

<BODY >
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->


<div align=&quot;center&quot;>
<DIV UNSELECTABLE ALIGN=&quot;center&quot; STYLE=&quot;height:210; width:90%; background-color:#99CCFF; border:1px solid black&quot;>
<DIV CLASS=&quot;bar title&quot;>HTMLEditor (Content Editable DIV)</DIV>

<DIV style=&quot;padding:10px&quot;>
<BUTTON UNSELECTABLE TITLE=&quot;Bold&quot; onclick='document.execCommand(&quot;Bold&quot;); oDiv.focus();' >Bold</BUTTON>
<BUTTON UNSELECTABLE TITLE=&quot;Italic&quot; onclick='document.execCommand(&quot;Italic&quot;); oDiv.focus();' ><I>Italic</I></BUTTON>
<BUTTON UNSELECTABLE TITLE=&quot;Underline&quot; onclick='if (oDiv.isContentEditable==true) document.execCommand(&quot;Underline&quot;); oDiv.focus();'><U>Underline</U> </BUTTON>


<button unselectable=&quot;On&quot; onclick='document.execCommand(&quot;InsertOrderedList&quot;);oDiv.focus();'
title=&quot;Ordered List&quot;> <B>OL</B></button>

<button unselectable=&quot;On&quot; onclick='document.execCommand(&quot;InsertUnorderedList&quot;);oDiv.focus();'
title=&quot;Unordered List&quot;> <B>UL</B></button>


<button unselectable=&quot;On&quot; onclick='document.execCommand(&quot;Paste&quot;);oDiv.focus();'
title=&quot;Paste content from clipboard&quot;> <B>Paste from clipboard!</B></button>



</DIV>
<DIV id=oDiv contenteditable ALIGN=left STYLE=&quot;height:100; width:95%;background-color:white; font-face:Arial; padding:3;
border:inset #99ccff; scrollbar-base-color:#99ccff; overflow=auto;&quot;></DIV>
<!--- <BUTTON UNSELECTABLE TITLE=&quot;Append from HTMLEditor&quot; onclick='oTextarea.value+=oDiv.innerHTML;oTextarea.focus();'>Append to TextEditor</BUTTON> --->
<BUTTON UNSELECTABLE TITLE=&quot;Append from HTMLEditor&quot; onclick='oTextarea.value+=oDiv.innerHTML;'>Append to TextEditor</BUTTON>

</DIV>
</div>
<BR/>

<div align=&quot;center&quot;>
<DIV UNSELECTABLE ALIGN=&quot;center&quot; STYLE=&quot;height:210; width:90%; background-color:#99ccff; border:1px solid black&quot;>
<DIV CLASS=&quot;bar title&quot;>TEXTEditor (TEXTAREA)</DIV>


<FORM ACTION=&quot;showcontent.cfm&quot; METHOD=&quot;POST&quot;>
<TEXTAREA name=&quot;oTextarea&quot; id=&quot;oTextarea&quot; STYLE=&quot;height:100; width:95%;background-color:white; padding:3; overflow=auto;&quot;></TEXTAREA>
<BR/>
<!--- <BUTTON UNSELECTABLE TITLE=&quot;Append to HTMLEditor&quot; onclick='oDiv.innerHTML+=oTextarea.value;oTextarea.focus();'> Submit</BUTTON> --->
</DIV>
</div>



<INPUT TYPE=&quot;submit&quot; VALUE=&quot;OK&quot;>
</FORM>


</body>
</html>

 
Sort by date Sort by votes
you have to precise : document.formname.texteareaname
for your case :

<BUTTON UNSELECTABLE TITLE=&quot;Append from HTMLEditor&quot; onclick='document.oForm.oTextarea.value+=oDiv.innerHTML;'>Append to TextEditor</BUTTON>
...
<FORM NAME=oForm ACTION=&quot;showcontent.cfm&quot; METHOD=&quot;POST&quot;>
....
 
Upvote 0 Downvote
Thank you very much Iza, it workx PERFECT !

Many thanks
Bram
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
158
jason.lex
jason.lex
BobMCT
  • Locked
  • Question
Suggestions on display retrieved date time for editing?
Replies
2
Views
118
BobMCT
BobMCT
tulsantide
  • Locked
  • Question
Populate values in a list box dynamically in HTA 1
Replies
5
Views
209
tulsantide
tulsantide
Megabyte512
  • Locked
  • Question
Canvas Profile Picture Edit
Replies
1
Views
102
ChrisHirst
ChrisHirst
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
162
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top