FLEX{er}

Find Cursor Position in a HtmlText Object (RichTextEditor, TextArea, TextField)
Find Cursor Position in a HtmlText Object (RichTextEditor, TextArea, TextField) – UPDATE

In the previous article I came out with a function that calculates the position of the cursor in the htmlText which is different than the position in the normal text. Rick draw my attention in his comments to some flaws which are correct: the & and other similar special chars are not counted correctly and the new lines are replaced by <p> and not counted.

For this new article I studied the problem and remodeled the calculateHtmlPosition function from the previous post and now more than one type of tag opening and ending are possible (see openTags and closeTags arrays). Here it is (comments are in the code):

public function calculateHtmlPosition(htmlstr:String, pos:int):int
{
    // we return -1 (not found) if the position is bad
    if (pos <= -1)
        return -1;
 
    // characters that appears when a tag starts
    var openTags:Array = ["<","&"];
    // characters that appears when a tag ends
    var closeTags:Array = [">",";"];
    // the tag should be replaced with
    // ex: &amp; is & and has 1 as length but normal 
    // tags have 0 length
    var tagReplaceLength:Array = [0,1];
    // flag to know when we are inside a tag
    var isInsideTag:Boolean = false;
    var cnt:int = 0;
    // the id of the tag opening found
    var tagId:int = -1;
    var tagContent:String = "";
 
    for (var i:int = 0; i < htmlstr.length; i++)
    {
        // if the counter passes the position specified
        // means that we reach the text position
        if (cnt>=pos) 
            break;
        // current char	
        var currentChar:String = htmlstr.charAt(i);
        // checking if the current char is in the open tag array
        for (var j:int = 0; j < openTags.length; j++)
        {
            if (currentChar == openTags[j])
            {
                // set flag
                isInsideTag = true;
                // store the tag open id
                tagId = j;
            }
        }
        if (!isInsideTag)
        {
            // increment the counter
            cnt++;
        } else {
            // store the tag content
            // needed afterwards to find new lines
            tagContent += currentChar;
        }
        if (currentChar == closeTags[tagId]) {
            // we ad the replace length 
            if (tagId > -1) cnt += tagReplaceLength[tagId];
            // if we encounter the </P> tag we increment the counter
            // because of new line character
            if (tagContent == "</P>") cnt++;
            // set flag 
            isInsideTag = false;
            // reset tag content
            tagContent = "";
        }
    }
    // return de position in html text
    return i;
}

The modified working example is bellow (pressing “Add _” button an underscore will be added at the cursor position):

Rick thanks for you comments and credit goes to you.

Future development can be done to be able to add over a selected part of text.

UPDATE: JBI had special situation and he explained it in his comment bellow, so please take a look – it may save you much trouble.

Previous in series

Share and Enjoy:

RTE_test_update_source

RTE_test_update

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: ActionScript, htmltext, positioning, RichTextEditor

This post was written by Andrei Ionescu

Views: 16719

On 04.01.08 Will Hankinson wrote these pithy words:

I’ve been using a function similar to this at work for a few months now (shame on me for not sharing). You’ve also got to watch out for the LI tags (there are no ULs in flash’s htmlText, so you’re safe there) and BR tags (a lot of times these get converted to P tags, but they’re technically legal so if the HTMLtext is explicitly set they can persist). I can pass my function along if you’re interested in peeking at it (though it’s not nearly so well commented).

On 04.01.08 Andrei Ionescu wrote these pithy words:

Will, thanks for comment and I’m looking forward to see your function posted here if you would like to post it. Thanks.

On 04.08.08 Andrei Ionescu wrote these pithy words:

mooksa did find an easier way to get the cursor position. Though I didn’t test it I’ll post here his code:

public static function getHtmlCaretPosition( target:UIComponent, caret:int ):int
{
    var range:TextRange = new TextRange( target, false, 0, caret );
    var pattern:RegExp = /(.*?)(<\/([^<>]*><\/[^<>]*)*>)/gm;
    var cleanHtml:String = range.htmlText.replace( pattern, "$1");
    var htmlLength:int = cleanHtml.length-1;
    return htmlLength;
}

His original comment is here.

On 05.29.08 najier wrote these pithy words:

Can u drag a UI control such as a Grid or canvas…etc and drop it in the RTE?

On 06.04.08 Justin wrote these pithy words:

I’m just beginning my Flex experience, and was curious as to how you calculated the normal position? I’m working in a TextArea, not a RichTextEditor if that makes a difference. Thanks in advance.

On 06.04.08 Andrei Ionescu wrote these pithy words:

For najier: You can drag and drop UI controls onto RTE, you can add UIs with addChild method, but it will never layer it in the text as you expect (no text wrap, no formating, nothing). The text area of the RTE knows to render just a small part of HTML tags (see here).

For Justin: As you can see in the source file you cand use selection.beginIndex property of the RTE like this:

RTE.selection.beginIndex

On 06.04.08 Rob wrote these pithy words:

From what I can tell the values for norm pos and pos are incorrect. Maybe I’m interpreting these incorrectly?

If you place your cursor after the first “a” you will see pos is “1″ and norm pos is “118″, now turn on HTML view and count the number of characters including whitespace.

Am I missing something?

On 06.05.08 Andrei Ionescu wrote these pithy words:

Rob I don’t know is I understand well what you mean. Norm Pos is correct to be 1 and also for Pos it should be 118 if you place the cursor after the first “a”. If you take the string “<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="13" COLOR="#555555" LETTERSPACING="0" KERNING="0">a” and put it in a document editor like Microsoft Word or OpenOffice Writer and do the word count command you will find that the string has 118 characters as it should (but be careful to delete the last space that is added automatically at the end of the string when pasting).

Maybe I don’t understand what you mean in you comment and if so please give me more info.

On 07.03.08 JBI wrote these pithy words:

Hi. This is a great piece of code. I have one small ‘fix’ though.
I have the following tag:

<span class="charo_u68" 
    id="txsr_a:2:{s:4:"bnlt";s:6:"e_LTnm";s:4:"bncp";s:3:"b_f";}">

Don’t ask why, it’s a complicated story

But this tag gets broken off, in the middle. Why? Because the code it recognizes a new tag and focuses on that.. So I’ve added two lines of code;

public function calculateHtmlPosition(htmlstr:String, pos:int):int
{
    // we return -1 (not found) if the position is bad
    if (pos <= -1)
        return -1;
 
    // characters that appears when a tag starts
    var openTags:Array = ["<","&"];
    // characters that appears when a tag ends
    var closeTags:Array = [">",";"];
    // the tag should be replaced with
    // ex: &amp; is & and has 1 as length but normal 
    // tags have 0 length
    var tagReplaceLength:Array = [0,1];
    // flag to know when we are inside a tag
    var isInsideTag:Boolean = false;
    var cnt:int = 0;
    // the id of the tag opening found
    var tagId:int = -1;
    var tagContent:String = "";
 
    for (var i:int = 0; i < htmlstr.length; i++)
    {
        // if the counter passes the position specified
        // means that we reach the text position
        if (cnt>=pos) 
            break;
        // current char	
        var currentChar:String = htmlstr.charAt(i);
        // checking if the current char is in the open tag array
        if(!isInsideTag)
        {
            for (var j:int = 0; j < openTags.length; j++)
            {
                if (currentChar == openTags[j])
                {
                    // set flag
                    isInsideTag = true;
                    // store the tag open id
                    tagId = j;
                }
            }
        }
 
        if (!isInsideTag)
        {
            // increment the counter
            cnt++;
        } else {
            // store the tag content
            // needed afterwards to find new lines
            tagContent += currentChar;
        }
        if (currentChar == closeTags[tagId]) {
            // we ad the replace length 
            if (tagId > -1) cnt += tagReplaceLength[tagId];
            // if we encounter the </P> tag we increment the counter
            // because of new line character
            if (tagContent == "</P>") cnt++;
            // set flag 
            isInsideTag = false;
            // reset tag content
            tagContent = "";
        }
    }
    // return de position in html text
    return i;
}

This fixed my problem. My case is very rare (won’t probably occur in normal HTML), but there are other cases in which my fix might help

On 07.03.08 Andrei Ionescu wrote these pithy words:

JBI, I’m sorry but the tag you mentioned and parts of the code was stripped away. So please send it by email. Thanks.

On 07.04.08 Andrei Ionescu wrote these pithy words:

JBI, thank for clarifying it out. I restored your comment.

On 10.24.08 Sunil wrote these pithy words:

Thanks for providing this code. I am trying to extend RTE with ability to insert images inside the text.

On 10.31.08 Gabriela Trindade Perry: HCI, Ergonomia, Flex » Blog Archive » Ritch Text Editor with Image wrote these pithy words:

[...] was soooooooo easy… But only because Andrei Ionescu had the dirty work done ;0) Check it out (view source [...]

On 01.13.09 Flex XHTML rich text editor (w images) | Another Flava wrote these pithy words:

[...] To insert an image in your post you need to find the exact cursor position, you can find a function to do this @ Flexer.info FIND CURSOR POSITION IN A HTMLTEXT OBJECT (RICHTEXTEDITOR, TEXTAREA, TEXTFIELD) – UPDATE . [...]

On 02.14.09 Andrew wrote these pithy words:

Hi,

This is VERY helpful. Thanks for sharing. I’m new to Flex and I have a simple question for you:

When a user clicks the “Add _” button, what does the function look like that adds the underscore to to richtexteditor?

On 02.15.09 Andrei Ionescu wrote these pithy words:

Hello Andrew! You can see the addUnderscore function in the source file. Anyway… here it is:

public function addUnderscore(event:MouseEvent):void
{
    var pos:int = calculateHtmlPosition(RTE.htmlText, RTE.selection.beginIndex);
    var totalLength:int = RTE.htmlText.length;
    var str1:String = RTE.htmlText.substring(0,pos);
    var str2:String = RTE.htmlText.substring(pos);
    RTE.htmlText = str1 + "_" + str2;
}

This is all. Quite simple

On 03.27.09 alex wrote these pithy words:

it works incorrect if position is 0. try it at the begin of text

On 04.06.09 Omal Raj wrote these pithy words:

Nice but fails once inside list item.

I was having trouble finding the html position with in html,
the following update on the code worked for me

if (currentChar == closeTags[tagId]) 
{
   // we ad the replace length 
   if (tagId > -1) cnt += tagReplaceLength[tagId];
   // if we encounter the  tag we increment the counter
   // because of new line character
   if (tagContent == "</P>") cnt++;
   if (tagContent == "<BR>") cnt++; // new line character (newly added)
 
   // set flag 
   isInsideTag = false;
   // reset tag content
   tagContent = "";
}

Thank you

On 04.09.09 Romulo wrote these pithy words:

excelent work there Andrei!
i´ve recently developed a kind of auto complete inside an textarea (in html/js) and now im trying to do the same on flex. Your script will help a lot in the development, but there is still one part missing.

In order to correctly position the suggestion list i need to find the position (x,y) of the word relative to the textarea. You know a way to get it? Thanks in advance.

Keep the good job up!

On 05.25.09 Ad wrote these pithy words:

I had a bug because of a semicolon in my text !

I found a solution :
(at the end of the code)

//...
else {
tagContent += currentChar;
// } &lt;== Just by mooving that brace
if (currentChar == closeTags[tagId]) {
...
}
} // &lt;== HERE

I hope it will not break anything else… It seems to be ok.

On 06.21.09 Tomer wrote these pithy words:

This is great, thanks .

Is there also a way then to do the vise-versa, find the text position of a htmlText place?

On 07.23.09 Ahmad Hamid wrote these pithy words:

Hey,
I rewrote the function using regular expressions to convert html to tokens of tags , entities and text before searching for the index in html. I posted the function at
http://flexbuzz.blogspot.com/2009/07/text-index-to-html-index-conversion.html

On 07.27.09 Ahmad Hamid wrote these pithy words:

ah well I have both functions html-to-text and text-to-html as part of my spellcheck/trackchanges highlight code. You can find it in the Highlighter.as class at the end.
http://flexbuzz.blogspot.com/2009/07/flex-textarea-track-changes-highlight.html

On 07.27.09 Andrei Ionescu wrote these pithy words:

Thanks Ahmad. Great job!

On 10.14.09 Ken wrote these pithy words:

For adding something like a copyright or registration symbol I just use

private function addMark(v:String):void
{
    rte.selection.htmlText = v;
    rte.selection.beginIndex++;	
}

Then I just call the method sending the html I want inserted.

On 11.14.09 Chuck Simpson wrote these pithy words:

I refactored the code and added the list item tag as a line breaking tag.

private var endtag:String;
private var tagMatcher:Object = {"&lt;":"&gt;", "&amp;":";"};
private var tagLength:Object = {"&gt;":0, ";":1};
private var breakingTags:Object = {"&lt;/LI&gt;":"1", "&lt;/P&gt;":"1", "&lt;BR&gt;":"1"};
private var tagContent:String = "";
 
private function getCharCount(c:String):int {
    var count:int = 1;
    endtag = endtag == null ? tagMatcher[c] : endtag;
    if(endtag != null) {
        tagContent += c;
        count = 0;
        if (endtag == c) {
            count = tagLength[endtag];
            endtag = null;
            if (breakingTags[tagContent] != null) {
                count++;
            }
            tagContent = "";
        }
    }
    return count;
}
 
public function calculateHtmlPosition(htmlstr:String, position:int):int {
    var i:int = -1;
    if (position &gt;= 0) {  
        var count:int = 0;     
        for (i = 0; i &lt; htmlstr.length; i++) {
            if (count &gt;= position) {
                return i;
            }
            count += getCharCount(htmlstr.charAt(i));
        }
    }
    return i;
}

On 11.14.09 Andrei Ionescu wrote these pithy words:

Chuck, thanks for sharing that nice piece of code with us. Great job!

ActionScript, How to

Find Cursor Position in a HtmlText Object (RichTextEditor, TextArea, TextField) – UPDATE

Table of contents

related

28 Comments

have your say

about

Twitter

tags

search

partners

Ad

recent

comments

inside

authors

clickage

Links

Meta

feed

Stats

Calendar

Archives

Categories

Quick

Copyright

March 2008
M	T	W	T	F	S	S
« Feb				Apr »
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31