Again, another post on how the Flex RichTextEditor blows goats… I’ve now completely taken the source from it, and made methods public or protected for extending in addition to adding the xhtmlText property… You can now override styling in the RichTextEditor and inject inline styles into things like a href tags…
This post is in direct relation with my post a few days ago on Customizing the Rich Text Editor
This new post adds an example tab that shows when you put in a link in the TextEditor it underlines it in the TextArea… rather than the ridiculous previous Flex RichTextEditor just leaving it blank, and only changing the cursor when hovering over the tag… I hate how it doesnt actually underline the link in the text editor… so I needed to override the setTextStyles() method… it’s all about overriding the setTextStyles… and you just can’t do that with the default Flex RTE…
I scrapped the default RTE and copied and pasted out the code… I don’t think we will run into any backwards compatibility problems because its just an mxml class. After taking the code, I made sure to at least put some updated comments in the top of the file ACJEditor.mxml… I documented that I adjusted the setTextStyles function to now take a new parameter called tf…
tf is a TextFormat class in flash, any change event in the RTE hits up the setTextStyles and you can pass it your own manipulated TextFormat. You can do a little bit more with this… now you can manipulate the htmlText fairly easily to at least show your changes… I used it to show an underline underneath the <a href > tags… I don’t quite have this working on load, it only seems to be happening on the addition of a link… I’m working on that, but pretty much prototyping right now to show it’s at least now possible… where as with the Flex RTE it just wasn’t… you couldn’t do jack squat because everything was private…
so please feel free take a shot at the new example, and get the source… feel free to manipulate it, and please BLOG ABOUT IT! it helps the community…
I’ve also gotten quite a few comments with the other post Customizing the Rich Text Editor and one of them mentions having an image show up inside the text editor… frankly i’m not even sure if this is possible at all… i haven’t fully looked at the TextFormat class yet, but because TextFormat is really what is formatting the html it is internal to flash… so as far as that goes, and getting it to actually show up in a textArea… I really am not to sure about that…
anyway… i suppose thats enough ramblings for now.
13 users commented in " Introducing ACJEditor its a RTE "
Follow-up comment rss or Leave a Trackbackthanks Axel…
I’ve been looking at the Flash Text Editor for Flex by Igor Dimitrijevic.
His demo has a hard wired image that gets inserted… but I’m not sure how a user would ‘browse’ to an image locally…
Apparently Igor and Jesse Warden have collaborated on this issue for some time beiginning in ‘05
[...] Introducing ACJEditor its a RTE [...]
[...] Introducing ACJEditor its a RTE [...]
[...] Introducing ACJEditor its a RTE [...]
[...] Introducing ACJEditor its a RTE [...]
Nice work … can’t wait to try this version
Is there any way to control the font-size??
It’s fantastic for GETTING the xhtmlText — but is there any way of taking the output of that and pushing it back in as xhtmlText? I can take the xhtmlText and push back in as htmlText — but it comes out all wrong.
The proprietary htmlText, though messy, pulls and pushes properly….
Currently there isn’t, but if you made the function a setter, and, you could do that, by making all of the functions in reverse…
i dont think it would be that hard to re engineer…
but i’m running short on time these days… let me know if you come up with something and i’ll integrate it.
Thanks for reading.
Axel
for my purposes I add some code witch allows to add image. It is an dialog with upload image to server and via JSON(AJAX) get uploaded image url and past it to text area. It is poor implementation. I don’t know will i continue it (I think about some image editor before pasting), but if you need code example, you can mail me.
the little bugger ate my inline tags. please find the previous post with the angle brackets replaced wit square brackets;
I have been playing with acjEditor. A couple of comments;
It doesn’t compile under flex 2.01 unless you change the [mwToolBar to [MX:HBOX and add a leading slash to the @Embed's. Also it doesn't like IUITextField it prefers UITextField. It also shoving htmlText into it doesn't always cause it to allow getting out the xhtmlText. I added a kludge like this;
private function update():void {
if (this.htmlText.length ] 0)
{
xhtmlText = richTextEditorToHtml( this.htmlText );
}
else
{
xhtmlText = richTextEditorToHtml( _htmlText );
}
}
and this;
public function set htmlText(value:String):void
{
_htmlText = value;
htmlTextChanged = true;
invalidateProperties();
update();
}
If there’s a better way please let me know.
A couple of minor additions that might be nice;
1) When a [p][/p] has no text, insert an This will allow some persnickety renders like MS Word to render a blank line. A better idea might be to replace it with a [br/]
2) Add a property that will allow “styles” on certain tags such as [p style="myStyle"] they would only be added to the xhtmlText output, and not do anything whilst editing.
Regarding the issue of how to handle reusing the html, what I did was to save the htmlText to the DB, and then stuff it into the htmlText field when I needed to, and get back the xhtmlText. ’tain’t pretty but it seems to work.
Thanks for the tool.
Paul
insert an This… should be;
insert an & n b s p ; This…
if you find yourself modifying it and think it’s good enough to give out, and its not hardcoded for anything specific in your project, zip it up, and send it back, i’ll put it up on the blog.
Leave A Reply