Skip to main content
NewbMan
Participant
Aug 6, 2010 4:50 PM UTC
Question

Problem with inserting HTML text into existing textFlow

So I have a spark textArea component, which has buttons to style it (bold, italic). I wish to have another button which performs the following function:

On clicking the button, the text that has been selected should get an icon placed in front of it.

So far, I have put this in the declarations:

<fx:Declarations>

<fx:String id="icon"><![CDATA[Works or not <img src="ico.png" width="14" height="7"/>]]></fx:String>

</fx:Declarations>

and I am using the:

reviewEditor.textFlow = TextConverter.importToFlow(tip,TextConverter.TEXT_FIELD_HTML_FORMAT); method.

However, the above method replaces the whole textarea content (obviously). I wish to insert the contents of "icon" in the textArea, at textarea.selectionAnchorPosition.

I have spent a lot of time looking online for a solution, and none of it seems to work. Some of it is half explained. I would really appreciate it, if someone could help me out with this.

Thanks in advance!

This topic is closed to new replies. Start a new post to keep the conversation going.

5 replies

Adobe Employee
robin_briggs
Adobe Employee
Aug 10, 2010 4:24 AM UTC

I'm not exactly clear on how this hooks up with Flex, but I'd suggest calling the mx_internal function getTextContainerManager:

     var editManager:IEditManager = richEditableText.getTextContainerManager().beginInteraction() as IEditManager;

     editManager.selectRange(editManager.absoluteStart, editManager.absoluteStart);

     editManager.insertInlineGraphic("ico.png", 14, 7);

I haven't tried this, but something like this should work.

Hope this helps,

- robin

Translate
NewbManAuthor
Participant
Aug 11, 2010 4:14 PM UTC

Thanks a ton for the answer Robin. I really appreciate it! But I guess that still does not solve my problem. Firstly, I am using a spark TextArea component. Secondly, I do not seem to find the 'getTextContainerManager()' function.

The current method that I am using is something like this:

var textFlow:TextFlow = textArea.textFlow;

textFlow.flowComposer.addController( new ContainerController( new Sprite() ));

var editManager:EditManager = new EditManager( new UndoManager() );

textFlow.interactionManager = editManager;

textFlow.flowComposer.updateAllControllers();

editManager.selectRange( insertionPoint, activePoint );

editManager.insertInlineGraphic( "assets/images/graphic.png", "auto", "auto", "none" );

This method is actually inserting images over the selection range; however, the selection rectangle color changes from the usual blue to a weird black color. This remains till the time I use some other function on that same textArea. I don't see any reason why the selection color should change. It makes absolutely no sense.

Translate
Adobe Employee
robin_briggs
Adobe Employee
Aug 16, 2010 5:55 PM UTC

The getTextContainerManager() function is in the mx_internal namespace. So the function call should compile fine as long as you include this line with your imports:

import mx.core.mx_internal;

use namespace mx_internal;

The Flex team uses mx_internal for functions that they would like to be available if needed, but think that most people won't need. They mark things mx_internal so that they are free in later versions to change the API. Going through the TextContainerManager to make your changes will work better.
Note that the blue selection color may be caused by the xor-ing on the image. If you would rather the image wasn't selected after insertion, you could set the cursor back to an insertion point right after the graphic:
editManager.selectRange(posAfterGraphic, posAfterGraphic);
- robin

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices