Using TLF to create an HTML editor

Report · Jun 30, 2009

Hi, I am new to Flex, so sorry if my questions seem naive.

My company has an internal CMS application which I helped write several years ago. The front-end is a desktop app which has a Rich Text Editor that allows users to drag images from another panel of the app, drop them on a paragraph, and depending on where they dropped (right or left side of the paragraph), right or left align the image with the paragraph. The text flows around the image as it would on an HTML page, since HTML content is the primary output of our CMS. The RTE does not have to maintain complete fidelity with the website, but it gets pretty close. The users find it intuitive and productive.

We need to bring our app up to date. We are trying to go the RIA route, and we need the ability to mimic HTML layout, particularly positioning of DIVs and normal HTML text flow around images. Here is a sample:

<html>
<body>
<div style="width:400">
<div style="position:relative;float:left"><img

src="http://i2.cdn.turner.com/cnn/2009/SHOWBIZ/Music/06/28/BET.awards.show/art.joe.jackson.cnn.jpg"/> </div>
<p>The star-studded BET Awards got under way without "the greatest star in the
world," Joe Jackson, father of the late Michael Jackson, said on Sunday
night. When asked about circumstances surrounding his son's death, he said, "I
have a lot of concerns but I can't get into that. ... I don't like what happened."</p></div>
</body>
</html>

In this case, the image is in a div which is anchored to the top left of a parent div. The text flows around the image.

Another requirement is that the control should output XHTML, since we need to XSL it into secondary formats such as RSS, plain text, etc.

So, how feasible does this sound using TLF? We are trying to avoid using an AJAX editor, since we would like to go entirely Flash. We are willing to write some custom code around TLF. However, I know many of the issues around making text flow around images, and I would rather go the full AJAX route than try to implement text flow myself.

Report · Jul 01, 2009

I would do whatever I could to try to use AIR for this. Then you can use webkit for your html editor. All your problems are essentially solved. We couldnt go down the AIR path yet:( so we are adapting TLF for a wysiwyg html editor. I cant get detailed... You can't extend like 99% of TLF objects so if composition and interfaces are not your friend you may want them to be. TLF doesnt have all the elments html does that makes for example nested lists fun, nested styles, etc. Once you have figured out a scalable way to import elements not in TLF and export back to proper html, then there is editing, ug. Make sure you have a good chunk of time. There are a few other posts on the forum about this.

Maybe someday Adobe will have some solution for rendering robust html inside the flash player. I think this is a big need for enterprises. Maybe a webkit plugin. I guess then you would have a browser inside a plugin(flash) in a browser and yet another "browser" developers would need to test on.

So as for it being possible i would say nearly possible but I would try to avoid it at all costs.

Report · Jul 01, 2009

Thanks for the tips, I will investigate Webkit in AIR.

Report · Jul 01, 2009

you could always look at some serverside xslt transformation too, but will still have some problems to solve with that. Maybe TLF will get more robust to supports lists and tables etc eventually.

Adobe Community

Using TLF to create an HTML editor