Flex RTE and the obscure getTextField() function
Because of issues with the YUI Rich Text Editor, I’ve convinced the bosses that we should use a modified version of the flex RTE control. Though flex has some weird htmlText quirks, the subset of HTML it renders (bold, italic, underline, font sizes/colors, and a few more) are almost exactly the subset of HTML we want our users to have access to. The downside is that the built-in RTE also uses a bunch of markup which is completely bogus, so I’ll have to do some regexp replacements to get it to spit out actually-usable HTML. These are the modifications that I’ll (hopefully) be making:
- As we want some consistency in our rich-text-editable fields, I can remove the font selection altogether.
- The flex-based font tag is pretty ridiculous and bears only loose resemblance to the actual html tag, so I’ll have to fix that
- Along with that, all of our text will need to be the same size… I’ll instead be adding a fake “Heading” dropdown which will modify the textsize in flex, but export heading tags to HTML
- Proper font-coloring will have to be done in-flex and then removed when it exports the HTML
- The built-in linking system is pretty atrocious–you select some text, click on the link textField, type in your link, and press Enter. I’ll be replacing that with a more traditional “Insert Link” popup dialogue (along with a “Remove Link” button).
- Add a couple of features which are really only relevant to our particular site.
While getting started on the link buttons, I was looking at the code from the RichTextEditor.mxml file. In several places, there are calls to textArea.getTextField(). I emulated those calls only to find that the function doesn’t exist. After Googling around for awhile and getting nowhere, I finally stumbled onto a solution in an Indian flex message board (of all places). It turns out that getTextField is in namespace mx_internal, though I haven’t been able to find that documented anywhere. Yay Adobe. Anyway, almost got the insert/remove link buttons working and I’ll post some examples/source when it gets more pretty.
Update: the RTE got pushed to the back-burner a little bit, so I’ll have to do some less fun stuff before I get back to it.
[…] In this post earlier this week, I set out the project goal of making the Flex Rich Text Editor control a little more user-friendly. Here’s the first bit. I’ve removed the old add link textField completely and replaced it with two new buttons: “Add Link” and “Remove Link.” The popup for the “Add Link” button automatically grants focus to the text field and places the cursor after the “http://”, just to make it a little easier to use. The “Remove Link” button does two things. First, it will remove a link from any highlighted text. Second, if the current text carat is on a link (and you don’t have any text highlighted), the “Remove Link” button will figure out the beginning and end of that link and remove the whole thing. […]