when i click on the image it should display in textarea .,like smiley

i have problem in displaying an image in textarea please help me to s开发者_StackOverflowolve it thanks

Textareas can only hold plain text. Use contenteditable or a fully functional editor, like TinyMCE to save you the troubles.

As anothershrubery already mentioned, textarea can only hold plain text.

You can instead use a div element with the contenteditable attribute set to true.

<div contenteditable="true">
    You can edit this text and also add images! <img src="smiley.jpg" alt=":)" />
</div>

There are also many different JavaScript WYSIWYG editors which uses the above method or an iframe in designmode.

Here's a couple of them:

• Aloha Editor
• MarkItUp
• TinyMCE
• Lightweight RTE
• CKEditor

You cannot display images in a textarea. Textarea's just accept plain text.

Textarea support text only, if you want to display image/ link or any thing else, use WYSIWYG HTML Editor

You can try this, a really good one ;)

http://premiumsoftware.net/cleditor/

You can try this:

HTML:

<div id="image_txtarea" style="width:auto"> 
<img src="image/Example.jpg" id="image" style="position:absolute"/>
<textarea id="some" style="position:absolute;display:none"></textarea>
</div>

JQUERY

$('#image').click(function(){
    var img = $('#image');
    $(this).hide().next('textarea').show().css({'background':'url('+ img.attr('src') +') no-repeat center center','width':img.width(),'height':img.height()});
});

The answer is yes, image can be placed in textarea.

I placed an animated gif in textarea (worked in ie-6 and ff-13.0.1) with this technique:

1. Convert any image into a base64 string. (free online converters available, there is a limit to the base 64 file size - around 30k image size); a simple url() background statement did not show image for me.

2. The online converters usually output both an <img> tag and a CSS background property with the correct values from the uploaded image. Just copy and paste the CSS output into your own file. use url data statement - url(data:image/ext.....)

3. use the base64 css as a background in the style statement.

4. to change images, you'll have to change div id="" or class where you have base 64 defined as background-image in the class or id.

5. time consuming to do conversions so make sure that you really want an image in a textarea before you start.