How to display an image in a textarea?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
youpa
Posts: 4
Joined: February 1st, 2007, 11:14 pm

How to display an image in a textarea?

Post by youpa »

Hello,

I attempted to display an image in a textarea. After some searches, I learned that below codes might work,

<textarea></textarea>
<Script>
var oImg=document.createElement("IMG");
oImg.src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif";
test.appendChild(oImg);
</Script>


it does work in IE 6, however, fails in my Firefox 1.0.0.1.

Do you have any idea? Kindly advise, thanks a lot.


--
youpa
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Post by jscher2000 »

Should a <textarea> display an image? I don't really think so, but maybe I'm narrow-minded.

I'm not sure your code is complete there. The MozillaZine Forum parser removes attributes from HTML code. To prevent that, check the box to "Disable HTML in this post" (this checkbox is above the Preview button in the more full-featured compose screen you see after choosing Quote or after your initial preview of quick reply). You can use the Preview feature to check that it worked prior to posting. And of course your code will lay out better if you surround it with the BBCode [code] and [/code] tags. :-)
youpa
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post by youpa »

OK, below is the complete codes. Just save them into a .html file and you will see it works in IE but not in Firefox.

<textarea id="test" rows="10" cols="40"></textarea>
<Script Language="JavaScript">
var oImg=document.createElement("IMG");
oImg.src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif";
test.appendChild(oImg);
</Script>


And, Should a <textarea> display an image? Well, my page will be quite friendly if I can implement this feature. Besides, the blog software wordpress, with HTML editor TinyMCE, could display images in its <textarea> very well.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Post by jscher2000 »

This type of element reference:

Code: Select all

test.appendChild(oImg);

doesn't usually work in Firefox. Try:

Code: Select all

document.getElementById("test").appendChild(oImg);

instead. Any luck?
youpa
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post by youpa »

Hello, problem persists with the revised code. Any further suggestion? Thanks!
Mordwin
Posts: 653
Joined: June 8th, 2005, 6:10 am

Post by Mordwin »

I'm not sure that's remotely valid HTML

Code: Select all

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->


No child elements appear to be permitted, just parsed character data (i.e. entities are parsed).
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Post by AlfonsoML »

youpa wrote:And, Should a <textarea> display an image? Well, my page will be quite friendly if I can implement this feature. Besides, the blog software wordpress, with HTML editor TinyMCE, could display images in its <textarea> very well.


That's not a textarea, that's a full iframe with editing capabilities. You can add any html element to such iframe, but a textarea as its name states is aimed just for text.
If you need to add an image then use one such html editor (TinyMCE, Xina, FCKeditor) instead of trying to do with a textarea what can't be done.
youpa
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post by youpa »

It's ok, thanks for the explanation.

I will try to find some iframe material.
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Post by AlfonsoML »

You don't need to find, just use one of those editor, the three are free and opensource.
antonyfal
Posts: 1
Joined: August 2nd, 2015, 11:25 am

Re: How to display an image in a textarea?

Post by antonyfal »

hey sure its late but i found this great plugin it allows changing the cursor, adding animated images, video links, images and and and
http......youtu.be/Jf_FqbzJlrI there is a download link, its a pay plugin, but well worth the price, comes with thousands of icons and animated aicons saves tons of work
Last edited by LIMPET235 on August 2nd, 2015, 11:34 am, edited 1 time in total.
Reason: Killed the link.
User avatar
LIMPET235
Moderator
Posts: 39936
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Re: How to display an image in a textarea?

Post by LIMPET235 »

Thanks but just a tad late.

Locking this oldie.
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.

(Always choose the "Custom" Install.)
Locked