Text per Klick in Textarea einfügen Abhängig von Radiobutton

Archivlink: javarea.de Forum > JavaScript > Text per Klick in Textarea einfügen Abhängig von Radiobutton

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Text per Klick in Textarea einfügen Abhängig von Radiobutton

Pages: [1]

geschrieben von 18inch am 09.05.2005 - 10:46

Hallo,
ich habe mir so ein kleines mini CMS gebastelt. Hier ist es mir möglich die Seiteninhalte meiner Seite zu verwalten. Ich kann z.B. auch per klick Bilder einfügen.

Beispiel:
Alle Bilder werden aus einem Ordnergelesen und dann aufgeslistet. Wenn ich nun auf ein Bild klicke, dann wird dieses automatisch in als Code in in die textarea übernommen. (In der textarea steht natürlih der Seiteninhalt)

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11:

<script language="JavaScript" type="text/javascript"> 
      <!-- 
      function text2(Text) 
      { 
         document.post.message.focus(); 
         document.post.message.value = 
         document.post.message.value + Text; 
         document.post.message.focus(); 
      } 
      //--> 
   </script>

Das verlinkte Bild sieht im code z.B. so aus:

	HTML-Quelltext
1:	<a href="javascript:text2('<img src="images/web/fruits-picture.jpg" width="200" height="127" class="img_inhalt" border="0">')">bildchen</a>

Jetzt möchte ich dieses Bild aber nicht einfach so in die Textarea einfügen. Ich möchte per Radiobuttons (left, right, middle) bestimmen, welche Ausrichtung das Bild hat. Wenn ich bei den radiobutton left angeklickt habe, dann soll der code auch inklusive align=left" eingefügt werden. Und bei rechts ...

Kann man das irgendwie realisieren??

Wenn ja! Wie??

Vielen Dank!

geschrieben von Klaush am 09.05.2005 - 17:57

Ich kann nur erahnen was du bereits hast und wie dein restlicher Code aussehen wird.

Du könntest folgendes versuchen:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28:

<script language="JavaScript" type="text/javascript">
  <!--
  function text2(Text)
  {
  	if (document.post.richtung[0].checked == true)
 		Text = "<div align=left>" + Text + "</div>";

	if (document.post.richtung[1].checked == true)
  		Text = "<div align=center>" + Text + "</div>";

	if (document.post.richtung[2].checked == true)
  		Text = "<div align=right>" + Text + "</div>";


	 document.post.message.focus();
	 document.post.message.value = document.post.message.value + Text;
  }
  //-->
</script>

<form name="post" action="">
<input type="radio" name="richtung" value="0" checked>left<br>
<input type="radio" name="richtung" value="1">center<br>
<input type="radio" name="richtung" value="2">right<br>
<textarea name="message" rows="30" cols="50"></textarea>
</form>

<a href="javascript:text2('<img src=images/web/fruits-picture.jpg width=200 height=127 class=img_inhalt border=0>')">bildchen</a>

geschrieben von 18inch am 10.05.2005 - 19:23

Danke für die Antwort! Das sieht schon sehr gut aus!
Ich hatte leider keine Möglichkeit es zu testen. Aber es wird so funktionieren. Ist es denn Möglich den Code von dem Imagezu verändern??
Angenommen es ist "right" aktiviert und man klickt nun auf ein Bild welches man in die Textarea einfügen will. Kann man dann nicht sowas erhalten:
<img ... ... ... ... widht=... .... ... class="right">
Ich denke, dass das die suberste Lösung wäre. Also müsste man mittels js Diese Zeichenkette class="right" innerhalb des img-Tags einbinden. Geht das???

Das Problem ist, dass ich absolut nicht mit der Syntax von js vertraut bin. Ansonsten würde ich es selber machen.

Vielen Dank für Eure Hilfe!!!!

geschrieben von René am 10.05.2005 - 20:18

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37:

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
function text2(src, wid, hei)
{
	if (document.forms[0].elements['richtung'][0].checked == true)
		var cla = 'left';
	else if (document.forms[0].elements['richtung'][1].checked == true)
		var cla = 'center';
	else if (document.forms[0].elements['richtung'][2].checked == true)
		var cla = 'right';

	var bild = '<img class="' + cla + '" src="' + src + '" border="0" width="' + wid + '" height="' + hei + '" /> ';

	document.forms[0].elements['message'].value += bild;
	document.forms[0].elements['message'].focus();
}
//-->
</script>

</head>
<body>

<form action="" name="post">
  <input name="richtung" type="radio" value="0" checked="checked" />left<br />
  <input name="richtung" type="radio" value="1" />center<br />
  <input name="richtung" type="radio" value="2" />right<br />

  <textarea name="message" rows="10" cols="50"></textarea>
</form>

<a href="javascript:text2('./images/web/fruits-picture.jpg', 200, 127);">bildchen</a>

</body>
</html>