javascript - custom textarea with image inside- Stack Overflow

admin管理员组

文章数量:1317909

i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...

for example i have :

<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>

so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )

thanks

i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...

for example i have :

<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>

so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )

thanks

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 9, 2011 at 19:39 Hussein 42.8k2525 gold badges115115 silver badges143143 bronze badges asked Apr 9, 2011 at 19:27 JohnJohn 7,9101717 gold badges6767 silver badges9696 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.

<div contentEditable="true"> Type here. You can insert images too </div>

Check working example at http://jsfiddle/6bCRJ/

本文标签： javascriptcustom textarea with image inside Stack Overflow