Vill ha som här på WF att man kan tex välja om texten i en textarea ska vara fet, understruken, eller kursiv genom att trycka på knappar ovan.. Någon som vet hur man gör detta?
Använder gärna som här på WF med en JavaScript-promt där man skriver in texten som ska formateras.
Textformatering i Textarea
28 svar · 1 254 visningar · startad av Compusa
hittar INTE vad jag söker
Sökningen gav dåliga resultat, ingen som har lust att skriva en exempel-kod?
Ska främst använda <B></B>, <U></U> och <I></I>
Hittade en lösning
Hittade en lösning på vad jag sökte och tänkte dela med mig av koden.
<form name="myForm">
<textarea name="foo" cols="30" Rows="10"></textarea><BR>
<a href="#" onClick="document.myForm.foo.value+='[B]Fet markerad text här[/B]'; return false;">
<IMG SRC="Bold.gif" BORDER="0" ALT="Fet markerad text"></a>
<a href="#" onClick="document.myForm.foo.value+='[I]Kursiv text här[/I]'; return false;">
<IMG SRC="Italic.gif" BORDER="0" ALT="Kursiv text"></a>
<a href="#" onClick="document.myForm.foo.value+='[U]Understuken text här[/U]'; return false;">
<IMG SRC="underline.gif" BORDER="0" ALT="Understruken text"></a>
</form>
Observera att...
WFs html formatering gillade inte riktigt min variant så jag tänkte bara klargöra min kod lite gran.
<form name="myForm">
<textarea name="foo" cols="30" Rows="10"></textarea><BR>
<a href="#" onClick="document.myForm.foo.value+='Fet markerad text här'; return false;">
<IMG SRC="Bold.gif" BORDER="0" ALT="[BOLD]Fet markerad
[/BOLD] text"></a>
<a href="#" onClick="document.myForm.foo.value+='[KURSIV]
Kursiv text här[/KURSIV]'; return false;">
<IMG SRC="Italic.gif" BORDER="0" ALT="Kursiv text"></a>
<a href="#" onClick="document.myForm.foo.value+='[UNDERSTRUCKEN]Understuken text här[/UNDERSTRUKEN]'; return false;">
<IMG SRC="underline.gif" BORDER="0" ALT="Understruken text"></a>
</form>
I min kod har jag dock bara begynelse tecknena som formateringskod, men eftersom dessa används även på WF så blev det lite fel.
Fungerar INTE riktigt som jag vill
Koden fungerar men när jag infogar dessa formateringar via knappar så kommer det alltid sist i textarean, jag vill att de ska infogas där markören står i textarean och inte som nu, alltid sist oavsett var markören befinner sig.
Någon som har en lösning?
Solbulles Webeditor
Åkej... här är en del av en "webeditor" som jag har plocka ihop av diverse delar. Antar att koden är IE-specifik som det mesta här i världen.
Ta del av detta och se om det är något att använda. I min "riktiga" editor som jag använder finns en del fler funktioner så du/ni kan ju hojta om det kan vara av intresse.
Kanske köra lite opensourceutveckling?
<html>
<HEAD>
<title>Solbulles Webeditor</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sparaPos() {
nuPos = document.selection.createRange();
}
function hilite(txtArea,man,over){
txtAreaName = txtArea.name;
txtRange = document.all[txtAreaName].createTextRange();
txtContainer = txtRange.parentElement().name;
objRange = document.selection.createRange();
hiliteTxt = objRange.text;
toFont_Txt = man + hiliteTxt + over;
if(hiliteTxt != ""){
objRange.text = toFont_Txt;
}
}
function AddText(form, Action){
var AddTxt="";
var txt="";
if(Action==1){
hilite(form.Text1,"<B>","</B>");
}
if(Action==2){
hilite(form.Text1,"<I>","</I>");
}
if(Action==3){
hilite(form.Text1,"<U>","</U>");
}
form.Text1.value+=AddTxt;
}
// End -->
</SCRIPT>
<form method="POST">
<TABLE border=0>
<TR>
<TD colspan=2>
<input type="Button" value="<B>" onClick="AddText(this.form,1);">
<input type="Button" value="<I>" onClick="AddText(this.form,2);">
<input type="Button" value="<U>" onClick="AddText(this.form,3);">
<br>
<textarea name="Text1" Rows=8 Cols=70 onclick="sparaPos();" ></textarea>
</TABLE>
</form>
</body>
</html>
Tack för svaret! Ska kolla igenom detta script, återkommer om det uppstår problem..
Ehh, gammalt inlägg men jag skriver ändå. Solbulle, jag är ute efter exakt samma sak. Är ditt script fritt att använda? IOFS sa du ju att det var fritt och det faktum att du lägger ut det såhär också men jag vill bara fråga för att vara riktigt säker.
Det går ju faktiskt att förenkla lite.... Och det är fritt att använda :)
<script language="JavaScript" type="text/javascript">
function addToSelection(before,after){
if(document.selection.createRange().text){
document.selection.createRange().text=before+document.selection.createRange().text+after;
}
}
</script>
<form method="POST">
<input type="Button" value="<B>" onClick="addToSelection('<b>','</b>');">
<input type="Button" value="<I>" onClick="addToSelection('<i>','</i>');">
<input type="Button" value="<U>" onClick="addToSelection('<u>','</u>');">
<br>
<textarea name="Text1" Rows=8 Cols=70></textarea>
</form>
Skulle vilja fråga en sak angående Solbulles script, men det gäller säkert ditt också Jojoxx.
Jag har ändrat <input type="Button" value="<B>" onClick="AddText(this.form,1);"> till <input type="image" src="bild.gif" onClick="AddText(this.form,1);">
Detta blev inte så bra. Rätt tagg läggs till som den ska i textarean men det laddas en ny sida där textarean är tom och först när man klickar på backknappen i IE så ser man taggen tillsammans med texten. Detta är när jag kör koden lokalt på HDD:n, men när jag kör den på servern tilsammans med den övriga koden så aktiveras post när jag ska göra en redigering och formuläret skickas iväg??
För övrigt ser ju ditt script lite smidigare ut, ska testa det :)
Det beror på att type="image" fungerar som submit. För att förhindra detta kan du lägga till return false; sist i onClick-eventet. Använder du min variant räcker det med en vanlig bild eftersom du inte behöver någon referens till formuläret; <img src="..." onClick="addToSelection('<b>','</b>');"
Ok, tackar för det :)
"Mitt" script är helt klart att använda, dock tvivlar väl ingen på att Jojoxx script är att föredra. :)
Men ditt script var bra också, det fungerade ju likadant :)
Kan man använda rullgardinsmenyer också och få varje menyval att generera en tagg? Hur skriver man då?
Ungefär så här;
<script language="JavaScript" type="text/javascript">
function addToSelection(before,after){
if(document.selection.createRange().text){
document.selection.createRange().text=before+document.selection.createRange().text+after;
}
}
</script>
<form method="POST">
<select name="foo" onChange="if(this.selectedIndex>0){addToSelection(this[this.selectedIndex].value.split('|')[0],this[this.selectedIndex].value.split('|')[1])} this.selectedIndex=0;">
<option>Välj</option>
<option value="<b>|</b>">Bold</option>
<option value="<i>|</i>">Italic</option>
<option value="<u>|</u>">Underline</option>
</select>
<br>
<textarea name="Text1" Rows=8 Cols=70></textarea>
</form>
Kan man få det som står i value="" att visas i en specifik textfärg?