Textarea ''wysiwyg'' bold etc

[sunadumari]

Hi folks, hope I'm in the wright section (I'm a newbie).

I've got a textarea that, with the click on a button, shows the html-look of the data in the textarea. This script I found on the net (with author source ).
Now I've added the option to make text in BOLD etc (code found on this forum), BUT it doesn't work....

This is the code (within a php file):

<div align="center">
<table style="width:600px;border:solid 1px #959492;background:#ebebea">
<tr><td valign="top">
<form name="f" method="post">
<textarea id="$key" name="$key" style="border:solid 1px #b9b8b6;padding:5px;width:300px;height:100px;scroll:auto;" $varwrap rows="$t_rows" cols="$t_cols" onkeyup=\"checktxtr("$key", $t_max, "dl$key");\"  class=formst>".$fields_val[$key]."
<a href="http://www.thenetter.com/scripts/" target="_new">More Free Scripts</a> dododod
</textarea>
 
 
 
 
<table onMouseover="changeto(event, "lightyellow")" onMouseout="changeback(event, "silver")"><tr><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>
<div id="dl$key"></div></b></font></td><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>".$msg2["chars_left"]."</b></font></td></tr></table> 
<script language="javascript">checktxtr("$key", $t_max, "dl$key");</script>
 
<BR>
<button onclick="window.document.f.$key.value='<BR>';preview.document.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">Nieuwe regel</button>
 
 
<input type="button" name="Button" value="B" onclick="ChangeText(this.f.$key,);" />&nbsp;<input type="button" name="Button" value="U" onclick="ChangeText(this.f.$key,;" />&nbsp; 
<input type="button" name="Button" value="LINE" onclick="ChangeText(this.f.$key,[HR SIZE=1] [/HR];" />&nbsp;<input type="button" name="Button" value="SPACE" onclick="ChangeText(this.f.$key,<BR />;"/>&nbsp;
 
 
</td><td valign="top">
<iframe src="about:blank" name="preview" style="height:100px;width:300px;border:solid 1px #b9b8b6;background:#ffffff" frameborder="0">
</iframe>
</td>
</tr>
</table>
 
<!--    getElementByTagName ('TEXTAREA')[0].value);  -->
 
<button onclick="preview.document.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">Voorbeschouwing</button>
<button onclick="window.document.f.$key.value='';preview.document.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">Clear All</button>
<button onclick="window.location.href=window.location.href">Ververs</button>
</div>
</form>

[epots9]

Hi sunadumari welcome to TSDN,

Please post the javascript functions checktxtr and changeback, i can't seem to find them in your code.

Also please use [code=html][/code] around html code and [code=javascript][/code] around javascript code.

thank you

[sunadumari]

Hi sunadumari welcome to TSDN,

Please post the javascript functions checktxtr and changeback, i can't seem to find them in your code.

Also please use around html code and around javascript code.

thank you

Allright.


They're not important as to my question, but here goes:

<script language='javascript'>
<!--
function checktxtr(txtrid, maxlngth, chrlr)
{
var txtr = document.forms['f'].elements[txtrid];
var txtlngth = txtr.value.length;
var chrlft = document.getElementById(chrlr);
 
if(txtlngth > maxlngth){txtr.value = txtr.value.substring(0, maxlngth); return;}
chrlft.innerHTML = maxlngth- txtlngth;
}
--></script>
 

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=='ignore')||source.tagName=='TABLE')
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=='ignore'))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
 

[gits]

hi ...

do you have a link to a testpage ... so that we may have a closer look at it?

and as far as i can see there should be an error on your posted code at line 12:

[HTML]<table onMouseover="changeto(event, "lightyellow")" onMouseout="changeback(event, "silver")">[/HTML]
here you misuse the double quotes ... inside the doubles you could use single quotes or you should escape the double-ones ...

kind regards

[sunadumari]

Hi Folks,

I might have solved it: I used this script found at

http://www.sitemasters.be/?pagina=sc...&cat=17&id=177

BUT now it doesn't show the HTML-preview (iframe on the right)






[HTML]<HTML>

<HEAD>

</HEAD>

<BODY onload="preview.document.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">




<script language="javascript">
function setCursor()
{
if(document.frmPost.$key.createTextRange)
{
document.frmPost.$key.caretPos = document.selection.createRange().duplicate();
}
}

function ubb(begin,eind,opmaak)
{
if(!eind && !opmaak)
{
if(document.frmPost.$key.createTextRange && document.frmPost.$key.caretPos)
{
document.frmPost.$key.caretPos.text = begin;
}
}

else if(opmaak == "dubbel")
{
var selectie = document.selection.createRange().text;
if(!selectie)
{
var url_deel = prompt("Typ hier de/het "+ begin +" die/dat geplaatst moet worden:","");
var tekst_deel = prompt("Typ hier de tekst die geplaatst moet worden:","");
if(url_deel && tekst_deel)
{
document.frmPost.$key.caretPos.text = "["+begin+"="+url_deel+"]" + tekst_deel + "[/"+eind+"]";
}
}

if(selectie)
{
var url_deel = prompt("Typ hier de url die geplaatst moet worden:","");
if(url_deel)
{
document.selection.createRange().text = "["+begin+"="+url_deel+"]" + selectie + "[/"+eind+"]";
}
}
}

else
{
if(opmaak != "geen")
{
var selectie = document.selection.createRange().text;
if(!selectie)
{
var new_inhoud = prompt("Typ hier de tekst in waarrond "+begin+" & "+eind+" geplaatst moet worden:","");
if(new_inhoud)
{
document.frmPost.$key.caretPos.text = begin + new_inhoud + eind;
}
}

if(selectie)
{
document.selection.createRange().text = begin + selectie + eind;
}
}
}

document.frmPost.$key.focus();
return;
}
</script>





<!-- Paste this code into the BODY section of your HTML document -->


<form name="f" method="post">
<div align="center">

<table style="width:600px;border:solid 1px #959492;background:#ebebea">
<tr>
<td colspan="21" align="center">

<textarea name="$key" $varwrap rows="$t_rows" cols="$t_cols" style="border:solid 1px #b9b8b6;padding:5px;width:300px;height:100px;scrol l:auto;" onkeyup=\"checktxtr("$key", $t_max, "dl$key");\" class=formst onkeyup="setCursor();" onkeydown="setCursor();" onfocus="setCursor();" onclick="setCursor();">".$fields_val[$key]."<a href="http://www.thenetter.com/scripts/" target="_new">More Free Scripts</a> dododod</textarea>


<table onMouseover="changeto(event, "lightyellow")" onMouseout="changeback(event, "silver")"><tr><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>
<div id="dl$key"></div></b></font></td><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>".$msg2["chars_left"]."</b></font></td></tr></table>
<script language="javascript">checktxtr("$key", $t_max, "dl$key");</script>

</TD><TD>
<iframe src="about:blank" name="preview" style="height:100px;width:300px;border:solid 1px #b9b8b6;background:#ffffff" frameborder="0">
</iframe>
<BR>
<!-- getElementByTagName ('TEXTAREA')[0].value); -->

<button onclick="preview.document.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">Voorbeschouwing</button>
<button onclick="window.document.f.$key.value='';preview.d ocument.write (document.getElementsByName ('$key')[0].value); preview.document.close(); preview.focus()">Clear All</button>
<button onclick="window.location.href=window.location.href ">Ververs</button>
</div>
</TD></TR>

<TR>

<td colspan="21" align="center">
<img src='left.gif' width="20" height="20" onclick="ubb('

','

','URL invoegen');">
<img src='center.gif' width="20" height="20" onclick="ubb('

','

','URL invoegen');">
<img src='right.gif' width="20" height="20" onclick="ubb('

','

','URL invoegen');">
<img src='b.gif' width="20" height="20" onclick="ubb('','','URL invoegen');">
<img src='i.gif' width="20" height="20" onclick="ubb('','','URL invoegen');">
<img src='u.gif' width="20" height="20" onclick="ubb('','','URL invoegen');">
</td></TR></TABLE>

</form>



</BODY>
</HTML>[/HTML]

[sunadumari]

Hi folks,

at this time I'm using this now





[HTML]<HTML>

<HEAD>



<script language="javascript">
function setCursor()
{
if(document.f.$key.createTextRange)
{
document.f.$key.caretPos = document.selection.createRange().duplicate();
}
}

function ubb(begin,eind,opmaak)
{
if(!eind && !opmaak)
{
if(document.f.$key.createTextRange && document.f.$key.caretPos)
{
document.f.$key.caretPos.text = begin;
}
}

else if(opmaak == "dubbel")
{
var selectie = document.selection.createRange().text;
if(!selectie)
{
var url_deel = prompt("Typ hier de/het "+ begin +" die/dat geplaatst moet worden:","");
var tekst_deel = prompt("Typ hier de tekst die geplaatst moet worden:","");
if(url_deel && tekst_deel)
{
document.f.$key.caretPos.text = "["+begin+"="+url_deel+"]" + tekst_deel + "[/"+eind+"]";
}
}

if(selectie)
{
var url_deel = prompt("Typ hier de url die geplaatst moet worden:","");
if(url_deel)
{
document.selection.createRange().text = "["+begin+"="+url_deel+"]" + selectie + "[/"+eind+"]";
}
}
}

else
{
if(opmaak != "geen")
{
var selectie = document.selection.createRange().text;
if(!selectie)
{
var new_inhoud = prompt("Typ hier de tekst in waarrond "+begin+" & "+eind+" geplaatst moet worden:","");
if(new_inhoud)
{
document.f.$key.caretPos.text = begin + new_inhoud + eind;
}
}

if(selectie)
{
document.selection.createRange().text = begin + selectie + eind;
}
}
}

document.f.$key.focus();
return;
}
</script>


</HEAD>

<BODY>

<?PHP include ("ubb.php");?>











<script type="text/javascript">

function showHTML () {

// ref textarea
textarea1 = document.getElementById('$key');
// where to view HTML code
viewHtml = document.getElementById('div1');
// Finally get HTML output in div
viewHtml.innerHTML = textarea1.value ;

}
</script>





<!-- Paste this code into the BODY section of your HTML document -->


<form name="f" method="post">
<div align="center">

<table style="width:600px;border:solid 1px #959492;background:#ebebea">
<tr>
<td colspan="21" align="center">

<textarea name="$key" id="$key" onkeyup="showHTML()" $varwrap rows="$t_rows" cols="$t_cols" style="border:solid 1px #b9b8b6;padding:5px;width:300px;height:100px;scrol l:auto;" onkeydown=\"checktxtr("$key", $t_max, "dl$key");\" class=formst onfocus="setCursor();" onclick="setCursor();">".$fields_val[$key]."
<B>dododod
</textarea>


<table onMouseover="changeto(event, "lightyellow")" onMouseout="changeback(event, "silver")"><tr><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>
<div id="dl$key"></div></b></font></td><td><font face="trebuchet, arial, HELVETICA" COLOR="#000099" size="-2"><b>".$msg2["chars_left"]."</b></font></td></tr></table>
<script language="javascript">checktxtr("$key", $t_max, "dl$key");</script>

</TD><TD>
<div id="div1" name="div1"
style="position:relative;width:350px;height:200px; border:1px solid
red;overflow:auto"></div>

<input type="button" onclick="showHTML()" value="Voorbeschouwing" />
<button onclick="window.location.href=window.location.href ">Ververs</button>

<!-- <iframe src="about:blank" name="preview" style="height:100px;width:300px;border:solid 1px #b9b8b6;background:#ffffff" frameborder="0"> -->
<!-- </iframe> -->
<BR>
<!-- getElementByTagName ('TEXTAREA')[0].value); -->


</div>
</TD></TR>

<TR>

<td colspan="21" align="center">
<img src='left.gif' width="20" height="20" onclick="ubb('<left>','</left>','URL invoegen');">
<img src='center.gif' width="20" height="20" onclick="ubb('[center]','</center>','URL invoegen');">
<img src='right.gif' width="20" height="20" onclick="ubb('<right>','</right>','URL invoegen');">
<img src='b.gif' width="20" height="20" onclick="ubb('<b>','</b>','URL invoegen');">
<img src='i.gif' width="20" height="20" onclick="ubb('<i>','</i>','URL invoegen');">
<img src='u.gif' width="20" height="20" onclick="ubb('<u>','</u>','URL invoegen');">
</td></TR></TABLE>

</form>



</BODY>
</HTML>[/HTML]

it works well, but it seems that it doesn't ''activatel'' the ubb.php file that works as a safeguard (I don't want <a href and <img etc etc in the textarea....)

If anyone needs to see the ubb.php let me know, I'll post it here.

Anyone a clue how to get a safeguard around this?!