Html:How to Show Images in a Textarea

Insert image into TextArea

I believe a contenteditable div is the right way to go. There is a method for sanitizing formatting from contenteditable divs as already described here:

Remove formatting from a contentEditable div

As a comment there stated, you may find yourself coming right back to a textarea though depending on how far you want to go with removing styles.

How to a put a textarea next to an image and have it fill up rest of the space?

I think this code will do what you want to do:

<div style="position:absolute; left:100px; right:100px;">
  <div style="position:relative;">
    <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/
          avatars/male200.png" style="position:absolute;">
    <div style="position: absolute; left:210px; right:0px; top:0px;">
      <input type="textbox" style="width:100%; height:200px; display:block;
          padding:0;">
    </div>
  </div>
</div>

Some fine-tuning may be needed. My answer is based on this post: http://jsfiddle.net/QaWMN/2/.

Can we add an image to a text area? If so how?

You can't display an image directly inside a textarea control.

The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.

Perhaps a writable div (content editable) would suit your purposes better.

Parse text in TextArea and display images based on the path

I put together a JSFiddle (http://jsfiddle.net/jt5yg/6) to do this. The HTML and Javascript were fairly simple:

<textarea id="rawdata" rows="10" style="width: 100%" onchange="processimages();">
</textarea>
<div id="images"></div>

and

var allfiles = /[a-z]\:\\[\w\\_-]+?\.jpg/gi;
function processimages(){
    var textarea = document.getElementById('rawdata');
    var imagecontainer = document.getElementById('images');
    var file;
    imagecontainer.innerHTML = '';
    while(file = allfiles.exec(textarea.value)){
        imagecontainer.innerHTML += '<img src="file:///'+file+'" />';
    }
}

Unfortunately, when I ran the script, the image tags were added, but the browser refused to display them. Security restrictions prevent the browser from accessing the local file system without explicit user action.

This makes sense, of course. If we could do this, hackers could access the contents of hidden system files on your PC the same way.

how to insert images inside a textarea and email them using php?

Seems to be you need WYSIWYG .

Nice one http://www.tinymce.com/

Your url to image has to absolute like http://example.com/img/img.png not /img/img.png

---

Related Topics