The forum operates in read-only mode. Please head to StackOverflow for support.

Tue, 11/10/2009 - 16:59

adico

Joined: 02/11/2009

Posts: 100

Cursor coordinates X,Y (SOLVED)

Hi,
has anyone been able to OR know how to capture the cursor position (blinking |) inside the editor?

I've googled and found a few examples (http://www.hscripts.com/scripts/JavaScr ... sition.php) related to the mouse, but I actually want to capture the cursor itself.

I can capture the keypress event inside the editor, now all I want to do is get the location of the blinking cursor

here is what I have so far...

function keyPressed(event)
{
   if (!event && window.event) 
      event = window.event;     
     
    if (event) 
   keyPress = (event) ? event.keyCode : event.which;   

  [b] [i]findPositions();[/i][/b]
}

function findPositions()
{
   var text = editor.document.getBody().getText();

   var selection = editor.getSelection();
   if (selection)
   {
      var selElement = selection.getSelectedElement();   
      var startElem = selection.getStartElement();      

      // Internet Explorer   
      var range = selection.getRanges();
      var dpl = range.duplicate();
      if (range.text.length > 0) 
      {
         dpl.moveToElementText(area);
         dpl.setEndPoint("EndToEnd", range);
         startPosition = dpl.text.length-range.text.length;
         endPosition = startPosition + range.text.length;         
      }
   }
   else
   {
      // Mozilla Firefox
      startPosition = area.selectionStart;
      endPosition = area.selectionEnd;
   }
}

any help would be extremely appreciated!!!

thanks,
adico

Tue, 11/10/2009 - 21:58

joolee

Joined: 05/11/2009

Posts: 9

Re: Cursor (not mouse) position

If you're looking for the x and y coordinates of the cursor, not the mouse, then I don't think that is possible.

Tue, 11/10/2009 - 22:50

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor (not mouse) position

joolee wrote:If you're looking for the x and y coordinates of the cursor, not the mouse, then I don't think that is possible.

I find that hard to believe...there is got to be a way to determine the x,y position. ..

Wed, 11/11/2009 - 18:43

garry.yao

Joined: 03/01/2009

Posts: 170

Re: Cursor (not mouse) position

I would propose a way if I know what would it be used for?

Wed, 11/11/2009 - 22:47

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor (not mouse) position

I am currently working on a dropdown menu that would move inside the editor as the user types.

I want to create it right underneath the cursor position and have it move to the right as the user types

Sat, 11/14/2009 - 06:39

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor (not mouse) position

Gary,

have you had a chance to look at this yet?
anyone? :?:

Sat, 11/14/2009 - 21:12

vidar

Joined: 14/11/2009

Posts: 5

Re: Cursor (not mouse) position

You could insert a dummy element, and move this after the cursor at every key press. This way you can get the position of that element instead. Dont know if this will affect the performance, but worth a try.

Sat, 11/14/2009 - 21:19

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor (not mouse) position

i am newbie to this, can you provide an example

Sun, 11/15/2009 - 14:34

vidar

Joined: 14/11/2009

Posts: 5

Re: Cursor (not mouse) position

This is a simple plugin that outputs the coordinates to document title.

CKEDITOR.plugins.add( 'cursorpos',
{
   init : function( editor )
   {
      editor.on( 'contentDom', function()
      {
         this.document.on( 'keypress', function() {

            var dummyElement = editor.document.createElement( 'img',
            {
               attributes :
               {
                  src : 'null',
                  width : 0,
                  height : 0
               }
            });

            editor.insertElement( dummyElement );

            var x = 0;
            var y  = 0;

            var obj = dummyElement.$;

            while (obj.offsetParent){
               x += obj.offsetLeft;
               y  += obj.offsetTop;
               obj    = obj.offsetParent;
            }
            x += obj.offsetLeft;
            y  += obj.offsetTop;

            window.parent.document.title = "top: " + y + ", left: " + x;

            dummyElement.remove();
         });

      })
   }
});

Thu, 12/03/2009 - 17:56

#10

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor (not mouse) position

Thanks Vidar, this is exactly what I was looking for. I appreciate your help.

This worked for a while until I realized that what I really needed was the position relative to the window. That is, I was using the x,y coordinates to draw a tool-tip next to the word. However, I noticed that when you scroll down the page (until the scroll bar appears), the Y coordinate gets larger and my tool-tip box was being displayed way at the bottom of the page.

Any ideas on how to get the actual x,y coordinates relative to the window or maybe how to subtract the scrolling bar's position?

Your help is much appreciated.
Thanks,
adico

Fri, 12/04/2009 - 16:19

#11

yamayra1

Joined: 04/12/2009

Posts: 2

Re: Cursor (not mouse) position

adico,

try subtracting the scrolling position (scrolltop & scrollleft). This will guarantee your tooltip remains inside the editor, but you still need to figure out a way to get the screenX and screenY relative to the parent window.

cheers
yamayra1

Tue, 12/08/2009 - 18:42

#12

adico

Joined: 02/11/2009

Posts: 100

Re: Cursor coordinates X,Y (SOLVED)

Want to capture the cursor coordinates within your editor? Here is the solution...

This example takes into account the IFrame position and also the scrolling position (left/right)

    CKEDITOR.plugins.add( 'cursorpos',
    {
       init : function( editor )
       {
          editor.on( 'contentDom', function()
          {
             this.document.on( 'keyup', function() {

                var dummyElement = editor.document.createElement( 'img',
                {
                   attributes :
                   {
                      src : 'null',
                      width : 0,
                      height : 0
                   }
                });

                editor.insertElement( dummyElement );

                var x = 0;
                var y  = 0;

                var obj = dummyElement.$;

               // Get offSetPos from IFrame-->Up
               var el  = parent.frames[0].frameElement;
               while (el){
                   x += el.offsetLeft;
                   y += el.offsetTop;
                   el = el.offsetParent;
                }
   
                // Get offSetPos from IFrame-->Down[/b]
                while (obj.offsetParent){
                   x += obj.offsetLeft;
                   y  += obj.offsetTop;
                   obj    = obj.offsetParent;
                }

                // Account for left/right scrolling
                var scrollTop = editor.document.$.documentElement.scrollTop;
                var scrollLeft = editor.document.$.documentElement.scrollLeft;

                x += obj.offsetLeft-scrollLeft;
                y  += obj.offsetTop-scrollTop ;

                window.parent.document.title = "top: " + y + ", left: " + x +  xx: " +scrollLeft+  ", yy: " + scrollTop;

                dummyElement.remove();
             });

          })
       }
    });

Please post any concerns and/or comments you may have.

Regards,
adico