CustomRichTextEditor with XHTML text

Extending the mx.core.RichTextEditor to give it and xhtmlText property using regular expressions. That sentence is pretty self explanatory.

Application Source

I’ve written on the the mx.controls.RichTextEditor before in flex… and there are some issues with the HTML that it outputs. That post states that the htmlText the the RichTextEditor pretty much blows as far as including it on a real html page…

There are many other solutions to this issue, there are some friends that have even written on it…

I had a few suggestions with the google code solution, simply because it wasn’t XHTML compliant, and it wasn’t really packaged as a component you could reuse. It was packages as pretty much an example mxml file with a function inside of it that did your regex to change the code… Which gave me a great start, I’m actually going to try to get on that google code site, and try to get on as a project contributor to give them the new component, or at least see what they think. Most solutions you read online including my post about the font being to large state that you can simply write a regular expression to change your text… I didn’t like how in my post the only thing i listed was how to call it by clicking a button and not doing it on a change event of some sort. So that was definitely one of the goals with this post. Another thing that annoyed me with the rich text editor was when i tried to manipulate the htmlText property of the RichTextEditor it simply wouldn’t take my values, or it would re-commit it’s values after mine had ran, even looking that source of the RichTextEditor, and overriding it, and overriding commitProperties, it still didn’t quite work out… so simply out of frustration, i decided… well.. what the heck… why would you want to override the htmlText… what if by chance… (this someone could be crazy) someone is actually using it… then you wouldnt want to take it away from them, right? Of course not… so on that post from thanksmister.com there are SOOOO many comments, and some of them have reverse engineered the regular expressions to change the htmlText back to what it was, and so I started thinking, why not just have a separate variable? The whole point of what we’re doing is to make the htmlText from the TextEditor actually XHTML compliant or either make it actually show something somewhat close to what it visually shows the user in flash, in the browser… meaning when you use htmlText output from flex, and you put it in an html page in a browser, it looks like shit if you adjust the font, color, size position or anything else, because of the way it formats it’s htmlText.

My solution was to create a variable called xhtmlText, so now you can use myRichTextEditor.htmlText or myRichTextEditor.xhtmlText… granted I think your supposed to get rid of whitespace in true valid xhtml text (i didn’t look up any specs… I read some coding standards on it, a while back (like 2 years ago) and I integrated all the things I could remember, all tags must have an ending tag, and they must be LOWERCASE (something absolutely annoys me when i see people mixing there tag case, say from HOMESITE!), and in a href tags, target=”_blank” is deprecated, and your now supposed to use rel=”external”. so thats the just of what I did in the regular expressions…

Application Source

Please feel free to check out the application, and view the source.

28 comments on this post.
  1. Mister:

    Dude, finally, finally, someone built a valid xhtml text editor. Great post man, thanks for mentioning my post, there was a ton of information just waiting to be used :).

  2. admin:

    no problem man, the sad thing is, i’m not exactly sure how well it’s gonna work, i’m not using it yet… it’s for a project that i will soon use, but the client is only going to have very limited options, so i’m not going to get to fully test it… but anyway, thanks for reading and posting on it.

    Axel

  3. hsTed:

    Nice work. I’m anxious to try this out as the stock RTE really does blow. Thanks!

  4. Pixelstudio:

    Hello there Axel,

    I guess i’m one of the many people who is trying to get the RTE to work within flex 🙂
    But well i first say what i want:

    i want the user to be able for farmat the input text and save that (with formatting)
    So i tried the Flex RTE editor. when the users click a button the htmltext is saved in a database.
    However the weird thing is the layout is very different when i load it back into the RTE editor. i tried the options you give in this post. and also your xhtml version. but i cannot get it to work.
    So i must be doing something wrong. perhaps you have an idea?

  5. malcolmg:

    I still couldnt get things to look right because Flex wraps every line with a tag…. madifying the CSS p still didnt make the code look correct in a html page

    I edited the replacement string to chang to a tag and the add a break as well..

    it worked for me to make the output look correct when I retrieve from a database and insert into a standard html page..
    //format tag
    pattern = /<P STYLE/gi;
    str = str.replace(pattern, “<span style”);
    pattern = //gi;
    str = str.replace(pattern, “”);

    hope this helps someone!

  6. thatstephen:

    Hi,

    This is great, I have had no end of problems dealing with the htmltext from Flex components (mostly textAreas with custom style controls because I didn’t want to give users too much style control).

    It doesn’t deal with some of the problems in the html. The most serious in my mind is the lack of tags around sets of and also the lack of standard HTML heading styles. Maybe if I get some time I guess I could add that.

    I think that this area of Flex (and the underlying Flash player) is to be improved soon. Adobe has mentioned improved text layout in various releases. To me the most serious problem is that the textrange class also has some serious problems with returning and adding style properties to the selected text. I think it would be SUCH an improvement to Flex if it was possible to add good Rich Text editing functionality as is possible with the likes of TinyMCE in Javascript.

    Two examples I have seen recently show how the limitations of the Flex handlling of rich Text are holding back Flex.

    1. An AIR app that has to use the TinyMCE javascript editor for html editing
    http://www.shawnsandy.com/index.php/shawnsandy/fullarticle/96

    2. The otherwise very good Buzzword online word processing application that was recently acquired by Adobe that does not offer any defined text styles functionality beyond the application of fonts and colours.

    This is not a rant, just a caution that the Flex handling of rich Text makes for limited posiblilities in this area.

    Thanks

  7. NWLearning:

    Nice job Axel…
    I looked at Igor’s rte which has the image insert functionality and I’m wondering what the issues are with getting that kind of functionality in the Flex RTE?

    I’m trying to extend the Flex RTE to handle image insertion by using the File Upload path and short circuiting it to just get the path to the image… but not having any luck with that tack…

    Any comments on the core issues with image insertion in the Flex RTE?

  8. Introducing ACJEditor its a RTE | Axelology:

    […] This post is in direct relation with my post a few days ago on Customizing the Rich Text Editor […]

  9. Custom RichTextEditor — Thanks, Mister!:

    […] all the posts and suggestions on that post and created a customized control that does this. Well, Axel Jenson has created such a custom control. I want to send many thanks to all those who posted over the past […]

  10. Kenny:

    Can someone explain how we are to use this as an editor? If I load from the DB, and save again, it either clears the field, or adds extra paragraph tags around everything. I am reading the xhtml parameter and saving that. I have tried putting the text back into the control via htmltext and xhmltext – both behave differently, and not correctly.

    It appears to me that this was written as a one-way editor – to always start blank, and simply save to a DB, or whatever.

    I need one that will work as a full blown editor…

    Any thoughts would be appreciated….

  11. admin:

    a full blown editor would be nice… SHOOOOWW MMEEE THE MONNNEEYYYYY

  12. Skitsanos:

    Once ActionScript/Flex will have support for XSLT, all these problems will be solved, Flex Rich markup will be easily transformed into XHTML or anything else…

  13. iTamt.cn » Blog Archive » ACJEditor:

    […] Flex的RichTextEditor有htmlText属性,但这个属性的值并不是灰常符合xhtml格式,那么来看下Axelology的这个ACJEditor组件。会输出可用的htmlText。 […]

  14. Jason:

    Okay, I’m an amateur, so bear with me, but when I use this, the xhtmlText I’m getting back has a lot of line breaks in it, around every tag.

    So
    everything
    starts to look like
    this.

    What am I doing wrong??

  15. Brixel:

    Hey Axel,

    Very cool stuff – one thing I noticed in your example though, your not wrapping with , so though the bullets display in a regular HTML page, they are not indented. Any chance you can add that?

  16. djheru:

    Great Post! I was wondering if anybody had already worked out the regex to “dirty” the HTML back to a form that the RTE will understand in the event that we will be editing content that had been cleaned?

    I guess a worst case scenario is that I add an extra column and save dirty and clean HTML and use the dirty for flex and the clean for sending directly to the browser, but it would be nice to have the code go “both ways”…

  17. Mário Júnior:

    Really, very good. Congratulations dude.

  18. Elvis Fernandes:

    Great component!

    Feed subscribed! 🙂

  19. Elvis Fernandes » Blog Archive » RichTextEditor customizado com suporte a XHTML no Flex:

    […] resolver isso o Axel estendeu o RichTextEditor e criou um componente que faz a mesma coisa, só que ele tem outra propriedade: xhtmlText. Essa propriedade armazena o […]

  20. Chris Mauger:

    This is a great way get better control of the RTE. Any thoughts on how to add additional True type fonts to the RTE and the RTE’s fontFamilyArray?

    I want to give users a couple more font options. You can easily assign 1 font to the RTE, but I want the user to have multiple options of fonts, that are additional from the normal sets.

  21. chad royer:

    Much better than the RTE. One thing I would still like is to get rid of the font tag altogether. I’ll be using the xhtml output on other parts of the page using normal html/css to define fonts/colors, so the font tag is messing me up. Is it possible to remove just the font tags? I want to keep all other formatting so I can add bold, italic, etc. and lists, alignment… just not the font.

    Thanks, and great work!

  22. Russ:

    so what about adding an image?
    I have been playing around a little with it, I have a button that will add an image code string, but I am not sure what to call to put that string into the code. Any thoughts?

  23. links for 2009-05-20 « Minesa IT:

    […] CustomRichTextEditor with XHTML text | Axelology RichTextEditor (tags: html xhtml flex adobe editor actionscript components flex3 richtexteditor rte de) […]

  24. arvind:

    Hey can we insert images in RichTextEditor??
    I wanted to know this because i ma planning to use this

  25. CrazyKoala:

    Hello. I just tried out this component. Exporting the xhtml text is not an issue, but I’m having trouble to do the opposite. This is because I would need to edit the text I exported.

    I tried like this for importing the xhtmlText :

    component.xhtmlText = my_value_text;

    But then theres no text showing.

    If i use component.htmlText instead i have my text but the format is not quite correct.

  26. oscar:

    Hi, do exist a method for to have a character in apex in Flex? For example I would put near a word the number in apex for a reference, like a book: word[1] the [1] in apex! Thanks

  27. oscar:

    edit me… in Flex 3, because in flex 4 it exist.

  28. Flex: Export valid HTML from the RichTextEditor « Thanks, Mister!:

    […] Keith Collins Alexology […]

Leave a comment