insert image into table have problem.

[GoogleCodeExporter]

example:http://stephen-m.appspot.com/htmlFilter
i can't insert image into table.

<td><image src="http://img.store.pchome.com.tw/web_ad/02/02/42/02024244.jpg" 
width="80" height="80"> 
</td>

it will break structure of table.
can somebody help me?

Original issue reported on code.google.com by jiangli...@gmail.com on 15 Apr 2010 at 9:11

[GoogleCodeExporter]

That's because it doesn't check to see if it's inside a table or not when it 
gets to
parsing the image and it adds the image tag after the table.

This should be fixed in the newer version.

However, the online example of the new version doesn't seem to work with it.
http://stephen-m.appspot.com/htmlFilterNew

Unfortunately, I don't have time atm to look into this problem in further depth.

Sorry.

Original comment by delfick...@gmail.com on 15 Apr 2010 at 9:20

[GoogleCodeExporter]

i am so sorry.

Original comment by jiangli...@gmail.com on 16 Apr 2010 at 4:01

[GoogleCodeExporter]

Dear Stephen,

I am working with htmlFilter and its doing a good job.  I am having a problem 
though with images.  It turns out that when there is only images or for the 
last image in a table, the image only shows if you put a bunch of breaks <br/> 
roughly equivalent to the number of lines the image takes up .. following the 
<img .. > tag.

I note that the standard Text and TextArea components don't seem to have this 
rendering problem.  So could you point me in the right direction in your code 
and I will put in the fix.

My email is gpepus@flexanalytics.com
Thanks
Greg

Original comment by gpe...@gmail.com on 7 Jun 2010 at 10:03

[GoogleCodeExporter]

Hi,

Can you give me an example of page and image that causes you this problem ?
Also, are you using the old or the new version ?

:D

Original comment by delfick...@gmail.com on 9 Jun 2010 at 1:58

[GoogleCodeExporter]

Stephen .. you can see the problem when you load this graphic in your sample 
application (old or new release).  Its not only a problem in tables its a 
problem in the HTML document body anywhere you place an image. It has to do 
with the fact that it appears as if the rendering is expecting text to flow 
around the image. If there is no text to flow around the image you never show 
the bottom of the image or if there is no text at ally any part of the image.  
It looks as if its expecting carriage returns or breaks <br/> type tags.  

<img 
src='http://www.smashingapps.com/wp-content/uploads/2008/02/free-graphics-hearts
.jpg'/>

It appears that if you addj enough line breaks to the html (equivalent to the 
number of lines the image is in height then the image will appear. E.g.

<img 
src='http://www.smashingapps.com/wp-content/uploads/2008/02/free-graphics-hearts
.jpg'/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br
/><br/><br/><br/><br/><br/><br/> 

I appreciate your help. We are using this code on a big project and its very 
good but for this issue.

Thanks
Greg

Original comment by gpe...@gmail.com on 21 Jun 2010 at 9:19

[GoogleCodeExporter]

Oh .. if you can give me a clue what is broken I can go ahead and fix it for 
you.

Original comment by gpe...@gmail.com on 21 Jun 2010 at 9:21

[GoogleCodeExporter]

hmmm, I see your point.

I have an exam tomorrow which I'm still busy studying for, but after that I'll 
definitely have a look as to why it does that

:D

Original comment by delfick...@gmail.com on 22 Jun 2010 at 12:17

[GoogleCodeExporter]

Stephen .. that would be most appreciated.  I'm sorry to say I don't fully 
understand what you have done here.  But I look forward to your response.  Good 
luck on your exam.

Original comment by gpe...@gmail.com on 22 Jun 2010 at 12:54

[GoogleCodeExporter]

> I'm sorry to say I don't fully understand what you have done here.

Fair enough

> Good luck on your exam.

Thankyou :D

Original comment by delfick...@gmail.com on 22 Jun 2010 at 1:22

[GoogleCodeExporter]

Hope you will still take a look at the issue though as I could really use some 
help with a fix.  Thanks

Original comment by gpe...@gmail.com on 22 Jun 2010 at 6:32

[GoogleCodeExporter]

Hmmm, it seems to work if you use the <image> tag instead and give it a width

<image src="free-graphics-hearts.jpg"  width="489" />

I made this change : http://code.google.com/p/flex-htmlfilter/source/detail?r=37
so it also works if you don't give it a width, but it defaults to being 95% 
width of what it is inside.

It also does this weird thing where it disappears when I reset the text (unless 
it has an explicit width) and I can't work out why :(

One day I might rewrite this thing and actually put in comments and structure 
it quite a bit nicely (I made it when I was fairly new to programming) and use 
Flex 4.

Until that point however, I don't have enough time to spare for rewriting it....

Original comment by delfick...@gmail.com on 23 Jun 2010 at 10:41

• Changed state: Started

[GoogleCodeExporter]

Stephen .. thanks so much for pin pointing the problem and giving out a fix .. 
its much appreciated.  One questino = can go add a section whereever you 
reference something = "image" so that something = "img" will have the same 
effect and will that approach work?

Original comment by gpe...@gmail.com on 23 Jun 2010 at 1:23

[GoogleCodeExporter]

> Stephen .. thanks so much for pin pointing the problem and giving out a fix

no probs

> make img behave like image ?

Not really.

The way htmlText works is it goes through the text you give it from the top 
down. It'll start with a text element and keeping giving it text until it finds 
either an image or a table. 

At that point it'll create an ObjectWrapper 
(http://code.google.com/p/flex-htmlfilter/source/browse/trunk/base/com/htmlFilte
r/objectWrapper.as) and put the image (or table) in there. It will then start a 
new text component and start putting stuff into there. (This is also the 
reason, why you can't continue selecting text when there is an image or a table 
in the way)

Finally, it renders each of these components one after the other (i.e. 
vertically stacked)

The img tag is something that flex provides and will work in any normal text 
component, and so my code doesn't touch it, and means we can still have images 
that are inline with the text.

Also, when you do <image> it uses the SuperImage class 
(http://code.google.com/p/flex-htmlfilter/source/browse/trunk/base/qs/controls/S
uperImage.as) and as such can't be put in with the other text anyways.

sorry....

Original comment by delfick...@gmail.com on 23 Jun 2010 at 1:41

[GoogleCodeExporter]

As in to say, I'm not going to put that change into my code, because I want to 
keep that distinction.

But the change is as simple as changing lines 112, 216, 231, 318 and 370 so 
they say img instead of image in HtmlText

http://code.google.com/p/flex-htmlfilter/source/browse/trunk/base/com/htmlFilter
/htmlText.as

And ensuring that all <img>s are outside <p> tags :)

Original comment by delfick...@gmail.com on 23 Jun 2010 at 1:46

[GoogleCodeExporter]

>> The img tag is something that flex provides and will work in any normal text 
component
I quote the Flex documentation 
(http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html):
"Note: The <img> tag is not fully supported, and might not work in some cases."
And of course, your cases are always the ones it doesn't work in ;-)

So given that knowledge, I want the standard html tag <img> to be interpreted 
as if it was an <image> tag.
The suggested changes in htmlText don't seem to work.

I solved it by replacing in the input of the filterContent() method 
  "<img" with "<image" 
and
  "</img" with "</image"

by adding these lines at the end of the method htmlFilter.filterContent() 
before the line "theData = theData.replace(htmlTag, replaceHTML);":

  // Added the following two lines to make it work with the default <img> tag
  // instead of having to specify <image> :
  theData = theData.replace(/<img/g, "<image");
  theData = theData.replace(/<\/img/g, "</image");

That works perfectly for me.

Original comment by zzy...@gmail.com on 21 Oct 2010 at 11:24

[GoogleCodeExporter]

The problem with that is if you want an image inline with the rest of your 
text. 

The image tag creates an objectwrapper, whereas img doesn't.....

Perhaps make a function alongside filterContent that changes all img tags to 
image so that it becomes an optional thing....... 

:)

Original comment by delfick...@gmail.com on 21 Oct 2010 at 11:34

[GoogleCodeExporter]

>> The problem with that is if you want an image inline with the rest of your 
text.
I understand what you mean. 
But in my experience, if in Flex you want an image inline with the rest of your 
text, you have a problem. ;) (cf. the <br> stuff you have to add as gpepus 
pointed out) 
Because it is simply not well supported in Flex. Period.

So that's a limitation I have to live with: I don't expect I can have images 
inline with text. and in that case I can change all <img> instances into 
<image>.

Original comment by zzy...@gmail.com on 21 Oct 2010 at 2:28