Extending the mx.core.RichTextEditor to give it and xhtmlText property using regular expressions. That sentence is pretty self explanatory.
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…
- Ruben’s post
- Google Code - Flex RichTextEditor
- Thanksmister.com’s post that had a humongous help with the regex’s
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…
Please feel free to check out the application, and view the source.
9 users commented in " CustomRichTextEditor with XHTML text "
Follow-up comment rss or Leave a TrackbackDude, 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 :).
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
Nice work. I’m anxious to try this out as the stock RTE really does blow. Thanks!
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?
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!
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
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?
[...] This post is in direct relation with my post a few days ago on Customizing the Rich Text Editor [...]
[...] 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 [...]
Leave A Reply