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=javascrip t][/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="ch angeto(event, "lightyello w")" onMouseout="cha ngeback(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.getEl ementsByName ('$key')[0].value); preview.documen t.close(); preview.focus() ">




<script language="javas cript">
function setCursor()
{
if(document.frm Post.$key.creat eTextRange)
{
document.frmPos t.$key.caretPos = document.select ion.createRange ().duplicate();
}
}

function ubb(begin,eind, opmaak)
{
if(!eind && !opmaak)
{
if(document.frm Post.$key.creat eTextRange && document.frmPos t.$key.caretPos )
{
document.frmPos t.$key.caretPos .text = begin;
}
}

else if(opmaak == "dubbel")
{
var selectie = document.select ion.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.frmPos t.$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.select ion.createRange ().text = "["+begin+"="+url _deel+"]" + selectie + "[/"+eind+"]";
}
}
}

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

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

document.frmPos t.$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:60 0px;border:soli d 1px #959492;backgro und:#ebebea">
<tr>
<td colspan="21" align="center">

<textarea name="$key" $varwrap rows="$t_rows" cols="$t_cols" style="border:s olid 1px #b9b8b6;padding :5px;width:300p x;height:100px; scroll:auto;" onkeyup=\"check txtr("$key", $t_max, "dl$key");\ " class=formst onkeyup="setCur sor();" onkeydown="setC ursor();" onfocus="setCur sor();" onclick="setCur sor();">".$fiel ds_val[$key]."<a href="http://www.thenetter.c om/scripts/" target="_new">M ore Free Scripts</a> dododod</textarea>


<table onMouseover="ch angeto(event, "lightyello w")" onMouseout="cha ngeback(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>".$msg 2["chars_left "]."</b></font></td></tr></table>
<script language="javas cript">checktxt r("$key", $t_max, "dl$key");</script>

</TD><TD>
<iframe src="about:blan k" name="preview" style="height:1 00px;width:300p x;border:solid 1px #b9b8b6;backgro und:#ffffff" frameborder="0" >
</iframe>
<BR>
<!-- getElementByTag Name ('TEXTAREA')[0].value); -->

<button onclick="previe w.document.writ e (document.getEl ementsByName ('$key')[0].value); preview.documen t.close(); preview.focus() ">Voorbeschouwi ng</button>
<button onclick="window .document.f.$ke y.value='';prev iew.document.wr ite (document.getEl ementsByName ('$key')[0].value); preview.documen t.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="javas cript">
function setCursor()
{
if(document.f.$ key.createTextR ange)
{
document.f.$key .caretPos = document.select ion.createRange ().duplicate();
}
}

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

else if(opmaak == "dubbel")
{
var selectie = document.select ion.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.select ion.createRange ().text = "["+begin+"="+url _deel+"]" + selectie + "[/"+eind+"]";
}
}
}

else
{
if(opmaak != "geen")
{
var selectie = document.select ion.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.select ion.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.getEle mentById('$key' );
// where to view HTML code
viewHtml = document.getEle mentById('div1' );
// Finally get HTML output in div
viewHtml.innerH TML = 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:60 0px;border:soli d 1px #959492;backgro und:#ebebea">
<tr>
<td colspan="21" align="center">

<textarea name="$key" id="$key" onkeyup="showHT ML()" $varwrap rows="$t_rows" cols="$t_cols" style="border:s olid 1px #b9b8b6;padding :5px;width:300p x;height:100px; scroll:auto;" onkeydown=\"che cktxtr("$key", $t_max, "dl$key");\ " class=formst onfocus="setCur sor();" onclick="setCur sor();">".$fiel ds_val[$key]."
<B>dododod
</textarea>


<table onMouseover="ch angeto(event, "lightyello w")" onMouseout="cha ngeback(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>".$msg 2["chars_left "]."</b></font></td></tr></table>
<script language="javas cript">checktxt r("$key", $t_max, "dl$key");</script>

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

<input type="button" onclick="showHT ML()" value="Voorbesc houwing" />
<button onclick="window .location.href= window.location .href">Ververs</button>

<!-- <iframe src="about:blan k" name="preview" style="height:1 00px;width:300p x;border:solid 1px #b9b8b6;backgro und:#ffffff" frameborder="0" > -->
<!-- </iframe> -->
<BR>
<!-- getElementByTag Name ('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?!