selected Item --> Textarea (javascript)

[Ronald Nickel]

Hallo

Ich möchte gerne Values von einer selectbox in eine Textarea übertragen

Beispiel:

<form ...
<SELECT name="insert_img">
<option value="bild-1.jpg">Bild 1</option>
<option value="bild-2.jpg">Bild 2</option>
<option value="bild-2.jpg">Bild 2</option>
<option value="bild-2.jpg">Bild 2</option>
</CFSELECT><br>
<textarea>Hier sehen sie das Bild:</textarea>
</form>.....

Wähle ich nun in der Selectbox "Bild1" an, soll dort wo der Cursor in der Textarea (gleiches Formular)stand, den string
<img src="images/bild-1.jpg" border="0">eingefügt werden.

Ich möchte dem Kunden also das lernen der richtigen Schreibweise für ein IMG Tag ersparen.

Geht das? wenn Ja wie? Hat jemand mir mal nen Link o.ä. wo ich stöbern kann?

Gruß Ronny

 

[Jürgen Auer]

Das entspricht in etwa der Situation, daß man in einem textarea ein Wort markiert, auf einen Button klickt und dann das Wort bsp. durch

'''Wort'''

ersetzt wird, also der Wiki-Code drumherum gebaut wird.

Das gibt es u.a. auf der Seite

http://beispiel.server-daten.de/wiki/Hauptseite

dort in den Editiermodus gehen, da ist das im JavaScript drin. Der Auslöser ist eben ein anderer.

 

[Soka]

CODE <SELECT name="insert_img" onChange="document.getElementById('area').value='<img src=\'images/'+this.value+'\' border=\'0\'>'">
<option value="bild-1.jpg">Bild 1</option>
<option value="bild-2.jpg">Bild 2</option>
<option value="bild-3.jpg">Bild 3</option>
<option value="bild-4.jpg">Bild 4</option>
</CFSELECT><br>
<textarea id="area" rows="1" cols="20">Hier sehen sie das Bild:</textarea>


Gruß Peter

 

[Jürgen Auer]

Das

CODE <SELECT name="insert_img" onChange="document.getElementById('area').value='<img src=\'images/'+this.value+'\' border=\'0\'>'">


ersetzt den bisherigen Inhalt komplett, es soll aber ergänzen - da, wo aktuell der Cursor steht oder dort, wo aktuell ein Wort markiert ist.

 

[Soka]

CODE
<script type="text/javascript">
<!--
function insert(aTag, eTag, obj) {
//var input = document.forms['formular'].elements['eingabe'];
var input = document.getElementById('area');
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}

//-->
</script>

<SELECT name="insert_img" onChange="insert('<img src=\'images/'+this.value+'\' border=\'0\'>', '')">
<option value="bild-1.jpg">Bild 1</option>
<option value="bild-2.jpg">Bild 2</option>
<option value="bild-3.jpg">Bild 3</option>
<option value="bild-4.jpg">Bild 4</option>
</CFSELECT><br>
<textarea id="area" rows="1" cols="20">
Hier sehen sie das Bild:</textarea></select>


LG Peter

 

[Ronald Nickel]

Ok das hilft mir schon mal weiter - vielen Dank

Gruß Ronny