12

I want to display HTML formatted content from various sources inside a Flash Flex application. Flash supports HTML formatting in its text fields, however it is very limited compared to a web browser. Are there any scripts out there that will convert common HTML formatted text into a format that Flash can handle? My particular use cases are:

  • Displaying HTML formatted emails inside Flash
  • Displaying RTF files inside Flash (after running an RTF2HTML conversion on the server)
  • Displaying random HTML content copied and pasted from other sources into Flash

I'm open to code that runs either on the client or the server, but server is probably preferable.

davr
  • 18,877
  • 17
  • 76
  • 99
  • Somewhat interesting question I'm curious if there are any sort of reliable server side HTML rendering engines that would send back down the pre-rendered data as bitmap data (although I imagine the over-head for doing this might be ridiculous). Alternatively client side check out StageWebView http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/media/StageWebView.html – shaunhusain Feb 21 '12 at 00:20
  • Actually I wonder if you could grab web-kit and hook into it to render the HTML server side then somehow send the renderered version (encoded as jpg or something) back to the client. Or if someone has already done this. – shaunhusain Feb 21 '12 at 00:22
  • @shaunhusain Yes, there are several projects out there that render web pages as a bitmap on the server and then send it back. You have your choice between a webservice that you call out to their API, or code you run on your own server. A few links: http://url2png.com http://webthumb.bluga.net/home http://www.thumbalizr.com/ http://www.boutell.com/webthumb/ http://khtml2png.sourceforge.net/ – davr Feb 21 '12 at 00:32
  • Also, StageWebView requires AIR (aka cannot run in a browser), and that doesn't help in my particular situation. May be helpful for others though. – davr Feb 21 '12 at 00:33
  • Ah okay sorry forgot about the AIR only restriction. The HTML that flash/flex are willing to interpret directly is pretty limited, so I'd think something like what you posted would be an ideal solution. What's the problem with using the ones you posted about? Image size or are they all paid services and you're looking for a free solution? – shaunhusain Feb 21 '12 at 00:36
  • @shaunhusain I want the text to be editable once it comes into Flash. If I can get it into a rich or TLF text field, then it's editable by the user. – davr Feb 21 '12 at 00:44
  • ah okay following again... so the idea is to convert more of the HTML elements into TextFlow or other kinds of TextFormat objects to get more of it to look how it would if it were full HTML. Am I correct here, or are you just wanting to strip away any HTML that won't be interpreted by the Flex components correctly? – shaunhusain Feb 21 '12 at 00:46
  • We always use backend services where we first filter tags with Jsoup, replace common tags like ie b to strong and bring it to an easy flashable format. This really is one of the most pains with fplayer besides multi threading. – Frank Szilinski Feb 24 '12 at 00:35

3 Answers3

5

The subset of html tags supported is quite poor and has not changed in forever:

<a>, <b>, <br>, <font>, <img>, <i>, <li>, <p>, <textformat>, <u>

This means is that regardless of conversion quality, html cannot be rendered as fully intended; you could also be giving up a significant portion of css styling if you replace unsupported tags with more basic ones.

That being said, http://simplehtmldom.sourceforge.net/ (PHP) would work with some tweaks and it's competent enough to cope with invalid markup as well (seeing how you're after processing content from various sources, I'd say this feature alone would save a lot of pain in the long run) - than replace

<h1>,...,<h6> => <b>
<strong>      => <b>
<em>          => <i>

and plaintext the rest of it into paragraphs you'd be surprised at how readable it would still be. You could be a bit fancy too like so:

<h1> => <b class="header1">

and add some css as appropriate (although flash css support is pretty limited too)

I've been saving this one for desert - you'll either love it or hate it but it would do the trick. Assuming your app is deployed in-browser (if not and I misread you, save me the embarrassment and stop reading right here) you could use an iframe to display your html, seriously.

JS<->AS communication is fairly straightforward and you could have it positioned over a predetermined area of your app, giving the illusion that it's part of it; just remember to set windowmode on the flash object/embed correctly so it does not render on top of other page elements, then increase the iframe z-index.

I would not be surprised if this is seen as an "ugly" approach, but it's beautiful on the inside - you'll end up with verbatim html and real css support. As for user interactions, you could even intercept link clicks etc. in the iframe and request an action from the movieclip.

Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 1
    Your answer lists quite a few points that came to mind. Especially the part with the html overlay in a certain area might be the most plausible way to deal with all the shortcomings of flash's own html rendering. How would you convert tables or forms to the flash html subset? - I just don't see it working via flash's own html rendering. – kontur Mar 05 '12 at 12:28
2

You can use HTMLPurifier and specify a whitelist of tags that you want to support.

Dragos
  • 138
  • 4
1

AS3 HTML Parser Library is not quite what I'm looking for, since it does not convert the HTML but instead renders it within Flash, meaning that it wont be editable. But it may be useful in some cases that I only want to display and not edit text.

Another option is to look at several sample HTML that I'd like to be able to display, and then write regex to convert them to the format Flash/TLF expects. But I feel like that may be a huge endeavor, due to the wide range of HTML out there.

davr
  • 18,877
  • 17
  • 76
  • 99
  • I don't understand. If your goal is to just display HTML content, then the library you linked to seems to do just that. – bug-a-lot Feb 29 '12 at 10:16