Thursday, September 9, 2010

Replacing user-selected text using AS3

In today's tutorial, we will learn how to let user turn his selected piece of text into tags.

This feature can be often seen at forums, bulletin boards, guest books, etc. It is basically a small text-editor for the poster. User is allowed to select a piece of text in his input field, and turn it into tags by clicking a button. For example, user has written "Hello" and wants to make it bold. He selects his "Hello", and click the Bold button in the interface of his post screen. His text is now turned into "<b>Hello</b>".

Here's what we're going to make:


Basically, we have a text field (with a scrollbar) and 3 buttons - bold, italic and underline. Try selecting a word or a few words or a symbol, and clicking one of those buttons. It should turn into bold, italic or underline tags (depending on which button you clicked).

We can operate with 2 read-only parameters of the text field, which are important in such situation. And those are: selectionBeginIndex and selectionEndIndex. These parameters return, you guessed it - indexes of the beginning and the end of user-selected area.

We will also make good use of substring method, however it can only be used on a String variable, not TextField object. That's why we will need to put our current text into a variable - currentText. We can put our selection into a variable too - currentSelect.

The scheme will be like this: Text before selection + modified selected text + text after selection. That's why we will need to crate 2 more variables: beforeSelect and afterSelect. They are all null at the beginning and are only changed once a button is pressed.

var currentText:String;
var currentSelect:String;
var beforeSelect:String;
var afterSelect:String;

My buttons are named b_bold, b_italic and b_underline. My text field is named inpF.

b_bold.addEventListener(MouseEvent.CLICK, manageBold);

function manageBold(MouseEvent):void
{
currentText = inpF.text;
currentSelect = currentText.substring(inpF.selectionBeginIndex,inpF.selectionEndIndex);
beforeSelect = currentText.substring(0,inpF.selectionBeginIndex);
afterSelect = currentText.substring(inpF.selectionEndIndex);
inpF.text = beforeSelect + "<b>" + currentSelect + "</b>" + afterSelect;
}

As you can see, it is not that hard. If you still have trouble figuring these variables' meaning, read above, where I stated what are they used for.

The next 2 buttons are similar:

b_italic.addEventListener(MouseEvent.CLICK, manageItalic);

function manageItalic(MouseEvent):void
{
currentText = inpF.text;
currentSelect = currentText.substring(inpF.selectionBeginIndex,inpF.selectionEndIndex);
beforeSelect = currentText.substring(0,inpF.selectionBeginIndex);
afterSelect = currentText.substring(inpF.selectionEndIndex);
inpF.text = beforeSelect + "<i>" + currentSelect + "</i>" + afterSelect;
}

b_underline.addEventListener(MouseEvent.CLICK, manageUnderline);

function manageUnderline(MouseEvent):void
{
currentText = inpF.text;
currentSelect = currentText.substring(inpF.selectionBeginIndex,inpF.selectionEndIndex);
beforeSelect = currentText.substring(0,inpF.selectionBeginIndex);
afterSelect = currentText.substring(inpF.selectionEndIndex);
inpF.text = beforeSelect + "<u>" + currentSelect + "</u>" + afterSelect;
}

Thanks for reading! Hope this was helpful!

6 comments:

Andre said...

Hello Kirill, after I apply the bold or italic, can I apply a font face and a size to it while mantaining the bold?

Kirill Poletaev said...

You can use the 'font' html tag.

Alternatively, you could not use any HTML at all, and do everything using AS3 text formats. Create a TextFormat object first, and then you can format your text using setTextFormat() method, by specifying the link to the format object, the starting and ending symbol indexes as the parameters of the method.

Andre said...

Kirill, why is it that when I use:

inpF.htmlText = beforeSelect + "" + currentSelect + "" + afterSelect;

instead of

inpF.text = beforeSelect + "" + currentSelect + "" + afterSelect;

The bold is only apply to the word and un"apply" in the other word that I´ve previous apply...?

Here´s my complete function:

bold_mc.addEventListener(MouseEvent.CLICK, bold_set);
function bold_set(MouseEvent):void
{
texto_atual = texto_painel.text;
selecao_atual = texto_atual.substring(texto_painel.selectionBeginIndex,texto_painel.selectionEndIndex);
selecao_antes = texto_atual.substring(0,texto_painel.selectionBeginIndex);
selecao_depois = texto_atual.substring(texto_painel.selectionEndIndex);
texto_painel.text = selecao_antes+""+selecao_atual+""+selecao_depois;
xml.telas.tela.texto[data_grid.selectedItem.Numero] = texto_painel.text;
data_grid.selectedItem.label = texto_painel.htmlText;
}

Kirill Poletaev said...

That's because when you use this method on a textfield with html text, you want to edit the "text" property, instead of "htmltext". But, when you try to do that - you can only see the selection of the "htmltext". There might be a solution to this, but I'd rather just use the setTextFormat() method that I mentioned in the previous comment.

Andre said...

Kirill setTextFormat works better with the TextArea component, thank you a lot for all your tips...!

EiNKA said...

Hi, I would like to make something like you did, but I want to make the text bold/italic/underlined. Not tags. Please can you give me some tip how to do that? Thank you!

Post a Comment