My sense is that these two lines do not return what you think they do, which is part of your problem:
var spanStart:int = leaf.getParagraph().parentRelativeStart; var spanEnd:int = leaf.getParagraph().parentRelativeEnd; In the above code, leaf.getParagraph().parentRelativeStart will give you the position of the _parent_ of the _ParagraphElement_. Which will not help you find the element in question nor the cursor's position within it. However low in the hierarchy you go, textflow.findLeaf(interactionManager.activePosition) ...will always return a FlowLeafElement. https://flex.apache.org/asdoc/flashx/textLayout/elements/FlowGroupElement.html#findLeaf%28%29 ...which will always be either a SpanElement or an InlineGraphicElement. Using findChildIndexAtPosition(relativePosition:int):int is completely useless for this purpose, as it only returns the child index of the first nested element in the container. textflow.findLeaf() is the only way. Even if you don't want to put the <br/> in a SpanElement (and I cannot see a use case where you would), you still want to use this to get the SpanElement where the cursor (or the beginning or end selection) resides, as a starting point. If you want to put it elsewhere, you can drill up in the hierarchy from there using FlowLeafElement.parent or FlowLeafElement.getParagraph(). >From there you need to get the relative position of the cursor within that SpanElement, for which you will need to do a nasty character comp hack b/c there are no hooks in the API to get this number. FlowLeafElement.getAbsoluteStart() might help, but you still need to do a nasty character compare hack to get the relative cursor position. _______________________________________________________________________ Joseph Balderson, Flex & Flash Platform Developer :: http://joeflash.ca Author, Professional Flex 3 :: http://tinyurl.com/proflex3book Scott Matheson wrote: > Joseph > So your approach is to fine out were you are within a block of > text, i could also do this, see example > > > > > in my case is "build" the text from single sentences, each sentence has an > associated sound clip, i play this clips by added and event handle to each > sentence > > > > > then i reconstruct the passage from the sentence, this is an good example > http://www.java2s.com/Code/Flex/Components/Addparagraphtoflowelements.htm > > > > > > > > > I have 2 challenges, why can i not add more that 1 span to a paragraph > > > > > or why can i not build a textFlow as a process > > > > > for each (var sentence:XML in data.sentence) > { > addSentence(sentence); > progress.push(false); > } > > > > > should add to the over all text > > > > > i.e. you can not do ta.textFlow = ta.textFlow + textFlow; > > > > > this is example, of my code > > > > > protected function buildParagraphView(event:FlexEvent):void > { > //reset array > progress.length = 0; > for each (var sentence:XML in data.sentence) > { > addSentence(sentence); > progress.push(false); > } > > } > > > > > > > > > private function addSentence(model:XML):void > { > > paraCount++; > var linkWrapper:LinkElement = new > LinkElement(); > > linkWrapper.addEventListener(FlowElementMouseEvent.MOUSE_UP, > clickActionHandle(model.clip)); > > span1.id = "span1"; > paragraph1.id = "paragraph" + paraCount; // > create a unique name > span1.text = model.text; > > linkWrapper.addChild(span1) > paragraph1.addChild(linkWrapper); > textFlow.addChild(paragraph1); > > ta.textFlow = textFlow; > > > } > > > > > > > > > > > > > my problem not is how do i dynamical add more Textflows to the screen > > > > > > > > > example of mouse over text if this helps anyone > > > > > <?xml version="1.0"?> > <!-- sparktextcontrols/SparkSelectionExample.mxml --> > <s:Application > xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:mx="library://ns.adobe.com/flex/mx" > xmlns:s="library://ns.adobe.com/flex/spark"> > > <s:layout> > <s:VerticalLayout/> > </s:layout> > > <fx:Script> > <![CDATA[ > import flashx.textLayout.elements.TextRange; > import flashx.textLayout.elements.*; > > private function selectSomeText(e:Event):void { > /* Get the location of the cursor. This is > the character position of the > cursor in the RichEditableText control after > the user clicks on it. */ > var activePos:int = > richTxt1.selectionActivePosition; > > /* Get the first SpanElement in the TextFlow. > */ > var leaf:SpanElement = new SpanElement(); > leaf = > SpanElement(richTxt1.textFlow.getFirstLeaf()); > > /* Get the start and end index values for the > first SpanElement. */ > var spanStart:int = > leaf.getParagraph().parentRelativeStart; > var spanEnd:int = > leaf.getParagraph().parentRelativeEnd; > > /* For the first SpanElement, if the cursor > position falls within the > SpanElement's character range, then select > the entire SpanElement. */ > if (activePos >= spanStart && activePos <= > spanEnd) { > selectSpan(spanStart, spanEnd); > return; > } > > /* Perform the same operations for each leaf > in the TextFlow. */ > while(leaf = SpanElement(leaf.getNextLeaf())) > { > spanStart = > leaf.getParagraph().parentRelativeStart; > spanEnd = > leaf.getParagraph().parentRelativeEnd; > if (activePos >= spanStart && > activePos <= spanEnd) { > selectSpan(spanStart, > spanEnd); > return; > } > } > } > > private function selectSpan(i1:int, i2:int):void { > richTxt1.selectRange(i1, i2); > } > > ]]> > </fx:Script> > > <s:Panel width="480" title="this is some text"> > <s:RichEditableText id="richTxt1" height="27" > click="selectSomeText(event)" editable="true" > percentWidth="100" > selectable="true" text="line one" textAlign="justify"> > <!-- <s:textFlow> > <s:TextFlow> > <s:p><s:span>1) Lorem ipsum dolor sit > amet, consectetur adipiscing elit.</s:span></s:p> > <s:p><s:span>2) Cras posuere posuere > sem, eu congue orci mattis quis.</s:span></s:p> > <s:p><s:span>3) Curabitur pulvinar > tellus venenatis ipsum tempus lobortis.</s:span></s:p> > </s:TextFlow> > </s:textFlow>--> > </s:RichEditableText> > </s:Panel> > > </s:Application> > > > > > > > > > > > > > > > > > ________________________________________ > From: Joseph Balderson [[email protected]] > Sent: Friday, April 04, 2014 4:01 PM > To: [email protected] > Subject: Re: <BR> in TextArea > > > > > Actually, if you create a BreakElement at the right place, it isn't > substituted > for a line break character "\n", and it isn't stripped out when you convert to > TLF or HTML code. > > > > > As fortune would have it, I am dealing with exactly that TLF issue right now > in > my project. I can't share the actual source, but I can tell you how I did it: > > > > > 1) Create a break element <br /> manually: > - ideas for solving it were in "I wanted to contribute some code...": > http://stackoverflow.com/questions/9937419/how-do-i-insert-a-spanelement-in-a-textflow > - but splitting the TextFlow and re-assembling really wasn't cutting > it for > complex structures like lists > SOLUTION: > 1. find the LeafElement for the cursor position (which is a > SpanElement) > --> textflow.findLeaf(interactionManager.activePosition) as > SpanElement > 2. find the relative position of the cursor within that SpanElement > --> since there is no way to get the absolute cursor position > relative to a > LeafElement, for this you need a hack comparing strings indexed from > cursorPos+pxAfter and cursorPos-pxBefore with SpanElement.getText(); > 3. find the parent ParagraphElement for that LeafElement > --> targetPara = leafElement.getParagraph(); > 4. find the index for that SpanElement within the ParagraphElement > (b/c you > might have several SpanElements within a ParagraphElement > --> leafElement.getParagraph().getChildIndex(leafElement); > 5. split the SpanElement > --> leafElement.splitAtPosition(relPos); > 6. insert BreakElement after the 1st part of the original SpanElement > --> targetPara.addChildAt(leafIndex+1,flowElement); > > > > > 2) Allow for creation of break element <br/> with Shift-Enter (not natively > supported): > 1. detect the shift-key pressed > 2. disable the default Enter key behaviour [it's read-only, so you > have to use > your own] > --> config = editor.textFlow.configuration as Configuration; > config.manageEnterKey = false/true; > 3. if the Enter key is pressed right after, then create a line break > at the > cursor (see above) > 4. on Mouseup on the Shift key, restore default Enter key behaviour > (so new > <li> or <p> work) > > > > > > > > > _______________________________________________________________________ > > > > > Joseph Balderson, Flex & Flash Platform Developer :: http://joeflash.ca > Author, Professional Flex 3 :: http://tinyurl.com/proflex3book > > > > > Scott Matheson wrote: >> Hi >> I am trying to build a Paragraph from sentences, >> >> this builds the Paragraph (from am XML file and itemRender) >> >> the build function looks like >> >> >> var linkWrapper:LinkElement = new LinkElement(); >> >> var sentence:SpanElement = new SpanElement(); >> >> sentence.styleName = 'linkStyle'; >> >> sentence.textDecoration = TextDecoration.NONE; >> >> sentence.text = model.text + " "; >> >> linkWrapper.addChild(sentence); >> >> paragraphArea.addChild(linkWrapper); >> >> >> >> Layout >> >> >> >> <s:TextArea id="ta" minHeight="0" width="100%" editable="false" >> >> <s:p id="paragraphArea" paragraphSpaceBefore="0"> >> >> </s:p> >> >> </s:TextArea> >> >> >> >> I get >> >> >> sentence1 >> >> sentence2 >> >> sentence3 >> >> >> >> my problem is how to i add a <br> in to the Paragraph and end up with >> >> >> sentence1 >> >> >> sentence2 >> >> >> sentence3 >> >> >> >> it would be good if the input text model.text could be >> "sentence1<br>sentence2<br>sentence3" >> >> >> >> >> >> ________________________________ >> >> Disclaimer: This electronic mail and any attachments are confidential and >> may be privileged. If you are not the intended recipient, please notify the >> sender immediately by replying to this email, and destroy all copies of this >> email and any attachments. Thank you. >> > > > > > ________________________________________ > From: Joseph Balderson [[email protected]] > Sent: Friday, April 04, 2014 4:01 PM > To: [email protected] > Subject: Re: <BR> in TextArea > > Actually, if you create a BreakElement at the right place, it isn't > substituted > for a line break character "\n", and it isn't stripped out when you convert to > TLF or HTML code. > > As fortune would have it, I am dealing with exactly that TLF issue right now > in > my project. I can't share the actual source, but I can tell you how I did it: > > 1) Create a break element <br /> manually: > - ideas for solving it were in "I wanted to contribute some code...": > http://stackoverflow.com/questions/9937419/how-do-i-insert-a-spanelement-in-a-textflow > - but splitting the TextFlow and re-assembling really wasn't cutting > it for > complex structures like lists > SOLUTION: > 1. find the LeafElement for the cursor position (which is a > SpanElement) > --> textflow.findLeaf(interactionManager.activePosition) as > SpanElement > 2. find the relative position of the cursor within that SpanElement > --> since there is no way to get the absolute cursor position > relative to a > LeafElement, for this you need a hack comparing strings indexed from > cursorPos+pxAfter and cursorPos-pxBefore with SpanElement.getText(); > 3. find the parent ParagraphElement for that LeafElement > --> targetPara = leafElement.getParagraph(); > 4. find the index for that SpanElement within the ParagraphElement > (b/c you > might have several SpanElements within a ParagraphElement > --> leafElement.getParagraph().getChildIndex(leafElement); > 5. split the SpanElement > --> leafElement.splitAtPosition(relPos); > 6. insert BreakElement after the 1st part of the original SpanElement > --> targetPara.addChildAt(leafIndex+1,flowElement); > > 2) Allow for creation of break element <br/> with Shift-Enter (not natively > supported): > 1. detect the shift-key pressed > 2. disable the default Enter key behaviour [it's read-only, so you > have to use > your own] > --> config = editor.textFlow.configuration as Configuration; > config.manageEnterKey = false/true; > 3. if the Enter key is pressed right after, then create a line break > at the > cursor (see above) > 4. on Mouseup on the Shift key, restore default Enter key behaviour > (so new > <li> or <p> work) > > > _______________________________________________________________________ > > Joseph Balderson, Flex & Flash Platform Developer :: http://joeflash.ca > Author, Professional Flex 3 :: http://tinyurl.com/proflex3book > > Scott Matheson wrote: >> Hi >> I am trying to build a Paragraph from sentences, >> >> this builds the Paragraph (from am XML file and itemRender) >> >> the build function looks like >> >> >> var linkWrapper:LinkElement = new LinkElement(); >> >> var sentence:SpanElement = new SpanElement(); >> >> sentence.styleName = 'linkStyle'; >> >> sentence.textDecoration = TextDecoration.NONE; >> >> sentence.text = model.text + " "; >> >> linkWrapper.addChild(sentence); >> >> paragraphArea.addChild(linkWrapper); >> >> >> >> Layout >> >> >> >> <s:TextArea id="ta" minHeight="0" width="100%" editable="false" >> >> <s:p id="paragraphArea" paragraphSpaceBefore="0"> >> >> </s:p> >> >> </s:TextArea> >> >> >> >> I get >> >> >> sentence1 >> >> sentence2 >> >> sentence3 >> >> >> >> my problem is how to i add a <br> in to the Paragraph and end up with >> >> >> sentence1 >> >> >> sentence2 >> >> >> sentence3 >> >> >> >> it would be good if the input text model.text could be >> "sentence1<br>sentence2<br>sentence3" >> >> >> >> >> >> ________________________________ >> >> Disclaimer: This electronic mail and any attachments are confidential and >> may be privileged. If you are not the intended recipient, please notify the >> sender immediately by replying to this email, and destroy all copies of this >> email and any attachments. Thank you. >> > > ________________________________ > > Disclaimer: This electronic mail and any attachments are confidential and may > be privileged. If you are not the intended recipient, please notify the > sender immediately by replying to this email, and destroy all copies of this > email and any attachments. Thank you. >
