Insert <img> tag into Textarea

JavaScript
1

Hi

I’m writing a CMS and I need some help coming up with some JavaScript Code which will allow a user to click on an image shown on the page and this action will cause the following HTML snippet to be written into a textarea field named “content”:

<img src=“strImagePath” />

Where strImagePath is the src attribute of the image which was clicked.

The snippet should be inserted after any text already present in the textarea field.

The images are displayed in a <div> tag which can be shown or hidden the using the following HTML:

<div id="imagebrowser">
<img src="images/image1.jpg" name="image1" />
<img src="images/image2.jpg" name="image2" />
<img src="images/image3.jpg" name="image3" />
</div>

Can anyone point me in the right direction?

2

Think this should do what your after, let me know


<script type="text/javascript" charset="utf-8">
	var imageAdder = function(){
		var browser = document.getElementById('imagebrowser');
		var images = browser.getElementsByTagName('img');
		
		//Add click event to all images within image browser
		for(var i=0;i<images.length;i++){
			images[i].onclick = update;
		}
		
		//function to update the textarea
		function update(){
			var content = document.getElementById('content');
			content.value = content.value + ' <img src="'+this.src+'" />'
		} 
	}
	
	window.onload = function(){
		imageAdder();
	}
</script>
3

Thanks Mortimer, that worked brilliantly!
:slight_smile: I owe you a pint!

4

Woo hoo! I like working for beer :slight_smile:

glad it worked.