Introducing ACJEditor its a RTE

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…

Application Source

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…

Application Source

anyway… i suppose thats enough ramblings for now.

17 comments on this post.
  1. NWLearning:

    thanks 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

  2. В Керченском проливе затонуло судно:

    […] Introducing ACJEditor its a RTE […]

  3. ВЗГЛЯД / Штормовоепредупреждение объявлено в Челябинской области…:

    […] Introducing ACJEditor its a RTE […]

  4. Президент Пакистана дал 48 часов на расследование теракта:

    […] Introducing ACJEditor its a RTE […]

  5. Авиакомпания "Самара": переход на летнее время и летнее расписание - Aviation Today:

    […] Introducing ACJEditor its a RTE […]

  6. hsTed:

    Nice work … can’t wait to try this version

  7. rt30000:

    Is there any way to control the font-size??

  8. Garry Schafer:

    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….

  9. admin:

    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

  10. Victor:

    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.

  11. Paul:

    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

  12. Paul:

    insert an This… should be;
    insert an & n b s p ; This…

  13. admin:

    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.

  14. Chris:

    To preface, I think all the work being done here is great. Just one thought: For those who are concerned about displaying HTML formatted in a Flex RTE in a different medium (e.g. HTML webpage), why bother override all of the flex controls? This includes the RTE, the HTMLText of all of the text capable controls, etc. Instead, simply take the code from any of the posts above, throw it in a utility and convert it on the way out to the server for storage? Similarly, convert it on the way back into flex when being called from the server. This way all of the text within flex can use the native flex formatting that adobe has chosen, and all external text called off a DB is xhtml compliant.

    For instance:
    UTIL CLASS

    public static function SetHtmlTextOnReturnFromServer(str:String):String{ // code here to convert and return}

    public static function SetHtmlTextOnSendToServer(str:String):String
    { // code here to convert flex “html” to xhtml compliant text }

  15. artur:

    how can i disable the rollover URL link that is automatically enabled on words that have URLS?

    its a usability horror.

    thanks

    artur

  16. supermoos:

    Great work!

    But..

    Did you ever solve the problem about URL styles not appearing on load?

  17. B. Innovative:

    Excellent work!

    I’m trying to expand this editor to use images. I’ve borrowed some of this code from Another Flava(http://anotherflava.com/?p=243).

    There’s an upload function in php that accompanies the code (uploads to an acj/images folder under the original file name). My main problem is that when calling one of the below statements to insert the image, I receive an error.

    ###img = ‘acj/images/’;
    textArea.htmlText = “”;
    -OR-
    textArea.htmlText = “”;

    The htmlText output does not receive the tag. It displays this:

    However, the xHtmlText displays correctly:

    The xHtmlText has the closing tag but the HtmlText doesn’t?! Very strange!

    This error gets thrown when debugging:
    TypeError: Error #1085: The element type “IMG” must be terminated by the matching end-tag “”.

    Looking at the error, it’s easy to see what is wrong. No tag! After the error is thrown, the conversion from HTML to xHTML is broken, meaning nothing else that is typed into the RTE gets converted to xHtml. The most interesting part is that the image DOES get displayed in the RTE correctly!

    Any ideas why I can’t get the function to place the tag into the textArea.htmlText? It just does not seem logical to me that the / within the img tag or the tag would be stripped off when using an assignment statement to the htmlText.

    Any help would be greatly appreciated. Email me for full source code, if needed.

Leave a comment