利用TextRange选择 修改 RichTextEditor TextArea中的字符串

http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_05.html

 

Selecting and modifying text

You can select and modify text in TextArea, TextInput, and RichTextEditor controls. To change a Label or Text control's text, assign a new value to the control's text or HTMLtext property. For more information on the HTMLText property, see Using the htmlText property.

Selecting text

The Flex editable controls provide properties and methods to select text regions and get selections. You can modify the contents of the selection as described in Modifying text.

Creating a selection

The TextInput and TextArea controls, including the RichTextEditor control's TextArea subcontrol, provide the following text selection properties and method:

• setSelection() method selects a range of text. You specify the zero-based indexes of the start character and the position immediately after the last character in the text.
• selectionBeginIndex and selectionEndIndex set or return the zero-based location in the text of the start and position immediately after the end of a selection.

To select the first 10 characters of the myTextArea TextArea control, for example, use the following method:

myTextArea.setSelection(0, 10);

To change the last character of this selection to be the twenty-fifth character in the TextArea control, use the following statement:

myTextArea.endIndex=25;

To select text in a RichTextEditor control, use the control's TextArea subcontrol, which you access by using the textArea id. To select the first 10 characters in the myRTE RichTextEditor control, for example, use the following code:

myRTE.textArea.setSelection(0, 10);

Getting a selection

You get a text control's selection by getting a TextRange object with the selected text. You can then use the TextRange object to modify the selected text, as described in Modifying text. The technique you use to get the selection depends on the control type.

Get the selection in a TextArea or TextInput control

Use the TextRange class constructor to get a TextRange object with the currently selected text in a TextArea or TextInput control. For example, to get the current selection of the myTextArea control, use the following line:

var mySelectedTextRange:TextRange = new TextRange(myTextArea, true);

The second parameter, true, tells the constructor to return a TextRange object with the selected text.

Get the selection in a RichTextEditor control

Use the selection read-only property of the RichTextEditor to get a TextRange object with the currently selected text in its TextArea subcontrol. You can use the TextRange object to modify the selected text, as described in Modifying text. For example, to get the current selection of the MyRTE RichTextEditor control, us the following line:

public var mySelectedTextRange:TextRange = myRTE.selection;

Modifying text

You use the TextRange class to modify the text in a TextArea, TextInput, or RichTextEditor control. This class lets you affect the following text characteristics:

• text or htmltext property contents
• text color, decoration (underlining), and alignment
• font family, size, style (italics), and weight (bold)
• URL of an HTML <a> link

Getting a TextRange object

To get a TextRange object you use the following techniques:

• Get a TextRange object that contains the current text selection, as described in Getting a selection.
• Create a TextRange object that contains a specific range of text.

To create a TextRange object with a specific range of text, use a TextRange constructor with the following format:

new TextRange(control, modifiesSelection, beginIndex, endIndex)

Specify the control that contains the text, whether the TextRange object corresponds to a selection (that is, represents and modifies selected text), and the zero-based indexes in the text of the first and last character of the range. As a general rule, do not use the TextRange constructor to set a selection; use the setSelection() method, as described in Creating a selection. For this reason, the second parameter should always be false when you specify the begin and end indexes.

To get a TextRange object with the fifth through twenty-fifth characters of a TextArea control named myTextArea, for example, use the following line:

var myTARange:TextRange = new TextRange(myTextArea, false, 4, 25);

Changing text

After you get a TextRange object, use its properties to modify the text in the range. The changes you make to the TextRange appear in the text control.

You can get or set the text in a TextRange object as HTML text or as a plain text, independent of any property that you might have used to initially set the text. If you created a TextArea control, for example, and set its text property, you can use the TextRange htmlText property to get and change the text. The following example shows this usage, and shows using the TextRange class to access a range of text and change its properties. It also shows using String properties and methods to get text indexes.

<?xml version="1.0"?>

<!-- textcontrols/TextRangeExample.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script><![CDATA[

     import mx.controls.textClasses.TextRange



    private function resetText():void {

        ta1.text = "This is a test of the emergency broadcast system. It is only a test.";

    }



     public function alterText():void {

        // Create a TextRange object starting with "the" and ending at the 

        // first period. Replace it with new formatted HTML text.

        var tr1:TextRange = new TextRange(

            ta1, false, ta1.text.indexOf("the", 0), ta1.text.indexOf(".", 0)

        );

        tr1.htmlText="<i>italic HTML text</i>"



        // Create a TextRange object with the remaining text.

        // Select the text and change its formatting.

        var tr2:TextRange = new TextRange(

            ta1, true, ta1.text.indexOf("It", 0), ta1.text.length-1

        );

        tr2.color=0xFF00FF;

        tr2.fontSize=18;

        tr2.fontStyle = "italic"; // any other value turns italic off

        tr2.fontWeight = "bold"; // any other value turns bold off

        ta1.setSelection(0, 0);

     }

  ]]></mx:Script>



  <mx:TextArea id="ta1" fontSize="12" fontWeight="bold" width="100%" height="100">

     <mx:text>

        This is a test of the emergency broadcast system. It is only a test.

     </mx:text>

  </mx:TextArea>

  <mx:HBox>

    <mx:Button label="Alter Text" click="alterText();"/>

    <mx:Button label="Reset" click="resetText();"/>     

  </mx:HBox>

</mx:Application>

The executing SWF file for the previous example is shown below:

Example: Changing selected text in a RichTextEditor control

The following example shows how you can use the selectedText property of the RichTextEditor control to get a TextRange when a user selects some text, and use TextRange properties to get and change the characteristics of the selected text. To use the example, select a range of text with your mouse. When you release the mouse button, the string "This is replacement text. ", formatted in fuchsia Courier 20-point font replaces the selection and the text area reports on the original and replacement text.

<?xml version="1.0"?>

<!-- textcontrols/TextRangeSelectedText.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="500">

  <mx:Script><![CDATA[

     import mx.controls.textClasses.TextRange;



     //The following text must be on a single line.

     [Bindable]

     public var htmlData:String="<textformat leading='2'><p align='center'><b><font size='20'>HTML Formatted Text</font></b></p></textformat><br><textformat leading='2'><p align='left'><font face='_sans' size='12' color='#000000'>This paragraph contains <b>bold</b>, <i>italic</i>, <u>underlined</u>, and <b><i><u>bold italic underlined </u></i></b>text. </font></p></textformat><br><p><u><font face='arial' size='14' color='#ff0000'>This a red underlined 14-point arial font with no alignment set.</font></u></p><p align='right'><font face='verdana' size='12' color='#006666'><b>This a teal bold 12-pt. Verdana font with alignment set to right.</b></font></p>";



     public function changeSelectionText():void {

        //Get a TextRange with the selected text and find its length.

        var sel:TextRange = rte1.selection;

        var selLength:int = sel.endIndex - sel.beginIndex;

        //Do the following only if the user made a selection.

        if (selLength) {

           //Display the selection size and font color, size, and family.

           t1.text="Number of characters selected: " + String(selLength);

           t1.text+="\n\nOriginal Font Family: " + sel.fontFamily;

           t1.text+="\nOriginal Font Size: " + sel.fontSize;

           t1.text+="\nOriginal Font Color: " + sel.color;

           //Change font color, size, and family and replace selected text.

           sel.text="This is replacement text. "

           sel.color="fuchsia";

           sel.fontSize=20;

           sel.fontFamily="courier"

           //Show the new font color, size, and family.

           t1.text+="\n\nNew text length: " + String(sel.endIndex - sel.beginIndex);

           t1.text+="\nNew Font Family: " + sel.fontFamily;

           t1.text+="\nNew Font Size: " + sel.fontSize;

           t1.text+="\nNew Font Color: " + sel.color;

        }

     }

  ]]></mx:Script>



  <!-- The text area. When you release the mouse after selecting text, 

     it calls the func1 function. -->

  <mx:RichTextEditor id="rte1" htmlText="{htmlData}" width="100%" height="100%" mouseUp="changeSelectionText()"/>

  <mx:TextArea editable="false" id="t1" fontSize="12" fontWeight="bold"     width="300" height="180"/>



</mx:Application>

The executing SWF file for the previous example is shown below:

Comments (1)

• Lead Bi January 20, 2009
  

  In the section "Selecting text ", should
    
  myTextArea.endIndex=25;
    
  be  
    
  myTextArea.selectionEndIndex =25;