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

Mon, 01/18/2010 - 17:40

smimigo

Joined: 18/01/2010

Posts: 9

[SOLVED] How to restore the original cursor's position?

Hi guys,

I am using CKEditor 3.x/FF3.x to develop a function, but I met a problem when I need to restore cursor's position, let me elaborate details. Please help to reply if you've any comments, thanks in advance.

The scenarios looks like this. One user open a page, is editing a within CKEditor, let's say the contains the following content

Testing content Hello World!

Assume userA's cursor is currently located after the "H" of "Hello". At the same time, the 's content is updated from Server-update when userA is still editing, let's assume server-update changed the 's content by adding "12345" after "Testing" to as below.

Testing content12345 Hello World!

So I'm writing code to update 's content, as well to keep userA's cursor. Some psedo code like this,

var pEle = getpElement...
var pText=pEle.innerHTML;
var pos = pText.indexOf("Testing");
pEle.innerHtml=pText.substr(0,pos) + ""12345"+ pText.substr(pos);
var selection= CKEDITOR.instances.editor1.getSelection();
var range = selection.getRanges()[0];
range.startOffset += "12345".length;
range.select()
selection.selectRanges([range])

Then comes the problem that userA's original cursor position cannot be restored, the cursor is just not visible. I can see range.startOffset has been added, but the cursor just doesn't work.

I don't know where the problem is, it just seems the range.select() doesn't take effect. Is it because the range object is changed when I am still trying to use it? Don't know much to CkEditor, please help if you have any comments or suggestions. Thanks again.

Regards
Steve

Wed, 01/20/2010 - 02:39

smimigo

Joined: 18/01/2010

Posts: 9

Re: How to restore the original cursor's position?

Could anyone help on this? Thanks in advance.

Wed, 01/20/2010 - 09:45

smimigo

Joined: 18/01/2010

Posts: 9

Re: How to restore the original cursor's position?

I make some progress myself, now I can get the cursor SET to the END of the with the following code.

var pEle = getpElement...
var pText=pEle.innerHTML;
var pos = pText.indexOf("Testing");
pEle.innerHtml=pText.substr(0,pos) + ""12345"+ pText.substr(pos);
var selection= CKEDITOR.instances.editor1.getSelection();
var range = selection.getRanges()[0];
var pCon = range.startContainer.getAscendant('p',true);
var newRange = new CKEDITOR.dom.range(range.document);
newRange.moveToPosition(pCon, CKEDITOR.POSITION_BEFORE_END);
newRange.select()

But when I try to set it to expected position within the paragraph with the following code, it failed when newRange.select() is executed, viewing the stacktrace, I saw the error is located at CKeditor plugin of "selection/plugins.js", the function is CKEDITOR.dom.range.prototype.select().

var pEle = getpElement...
var pText=pEle.innerHTML;
var pos = pText.indexOf("Testing");
pEle.innerHtml=pText.substr(0,pos) + ""12345"+ pText.substr(pos);
var selection= CKEDITOR.instances.editor1.getSelection();
var range = selection.getRanges()[0];
var pCon = range.startContainer.getAscendant('p',true);
var newRange = new CKEDITOR.dom.range(range.document);
newRange.setStart(pCon ,range.startOffset+"12345".length);
newRange.setEnd(pCon ,range.startOffset+"12345".length);
newRange.select();

I am wondering is it a bug of ckeditor? Could anyone please help on that? Thanks a lot!

Wed, 01/20/2010 - 16:39

adico

Joined: 02/11/2009

Posts: 100

Re: How to restore the original cursor's position?

The scenarios looks like this. One user open a page, is editing a within CKEditor, let's say the contains the following content

Testing content Hello World!

Assume userA's cursor is currently located after the "H" of "Hello". At the same time, the 's content is updated from Server-update when userA is still editing, let's assume server-update changed the 's content by adding "12345" after "Testing" to as below.

Testing content12345 Hello World!

From a design point, based on your description, I dont think it would be a good idea to restore the cursor position after the server updated. That is, what if after the update the text is totally different from what the user was looking at? where would you set the cursor?

That is, picture this scenario:
lets say the original text is "Hello World!" and the cursor is at "W". After the update, the new text becomes "Hello". Where would you set your cursor?

Thu, 01/21/2010 - 04:27

smimigo

Joined: 18/01/2010

Posts: 9

Re: How to restore the original cursor's position?

adico wrote:
From a design point, based on your description, I dont think it would be a good idea to restore the cursor position after the server updated. That is, what if after the update the text is totally different from what the user was looking at? where would you set the cursor?

That is, picture this scenario:
lets say the original text is "Hello World!" and the cursor is at "W". After the update, the new text becomes "Hello". Where would you set your cursor?

Adico, many thanks for your feedback.

You are right that when the updated text from server override or conflict with the position that the user is currently editing. There might be some very complex scenarios to explain here, but I do have some algorithm to transform the position to an doable position when that happened. Take your scenario as example, when I find the original position is no more valid, I will change the position to the nearest position, here to after "o" of "Hello".

So my problem continues, I cannot move the cursor to expected position technically, could you let me know how to do that, if some script or examples, that will be best to me. Thanks again.

Thu, 01/21/2010 - 05:13

adico

Joined: 02/11/2009

Posts: 100

Re: How to restore the original cursor's position?

if that is the case, take a look at one of my previous post: http://cksource.com/forums/viewtopic.php?f=11&t=16658&p=42575#p42575

you'll have to do something similar to the following:

   
     var cursorPos = setCursorPos(editor);
   
    function setCursorPos(editor)
    {
       if (!editor)
          return;
             
       var objRange  = editor.document.$.selection.createRange();
       var sOldRange = objRange.text;
       var sTempStr = '%$#'

       //insert the sTempStr where the cursor is at
       objRange.text = sOldRange + sTempStr; objRange.moveStart('character', (0 - sOldRange.length - sTempStr.length));

       //save off the new string with sTempStr
       var sNewText = editor.document.$.body.innerText;

       //set the actual text value back to how it was
       objRange.text = sOldRange;

           // locate sTempStr  and get its position
       for (var i=0; i <= sNewText.length; i++)
       {
          var sTemp = sNewText.substring(i, i + sTempStr.length);
          if (sTemp == sTempStr)
          {
             var curPos  = (i - sOldRange.length);
             return curPos-1;
          }   
       }
       return 0;
    }

the way it works is, I insert a "weird" string inside the editor, then I loop back and increment my counter until I find the "weird" string I inserted. All you'll have to do, is remember that number and move your cursor to that location after the update (similar to what I am doing to insert the weird string).

adico

Thu, 01/21/2010 - 05:59

smimigo

Joined: 18/01/2010

Posts: 9

Re: How to restore the original cursor's position?

adico wrote:if that is the case, take a look at one of my previous post: http://cksource.com/forums/viewtopic.php?f=11&t=16658&p=42575#p42575

you'll have to do something similar to the following:

the way it works is, I insert a "weird" string inside the editor, then I loop back and increment my counter until I find the "weird" string I inserted. All you'll have to do, is remember that number and move your cursor to that location after the update (similar to what I am doing to insert the weird string).

adico

Thanks again for your quick reply.

Sorry, a bit confused. Now I've the position number that where I should put the cursor, but I don't know how to move blinking cursor there, it just does't work. And getCharFromPost() is abit diffferent from what I need?
By the way, could I ask why my previous code doesn't work if you've some background about that, Is it just not a right direction, or there are some bugs of my code? You know, when try to moveToPosition, it could be located at the right position, that is before or after the element. But when I use setStart and setEnd for positions within the , exceptions are thrown from CK's "selection/plugin.js" when executing newRange.select().

Thu, 01/21/2010 - 10:15

smimigo

Joined: 18/01/2010

Posts: 9

Re: How to restore the original cursor's position?

I finially get it resolved. The code about Selection/Range is correct, problem is due to pElement.innerHTML, which should be pEle.firstChild.insertData(pos,"12345");. Paste my code below for reference.

var pEle = getpElement...
var pText=pEle.innerHTML;
var pos = pText.indexOf("Testing");
pEle.firstChild.insertData(pos,"12345");
var selection= CKEDITOR.instances.editor1.getSelection();
var range = selection.getRanges()[0];
var pCon = range.startContainer.getAscendant('p',true);
var newRange = new CKEDITOR.dom.range(range.document);
newRange.setStart(pCon ,range.startOffset+"12345".length);
newRange.setEnd(pCon ,range.startOffset+"12345".length);
newRange.select();

Adico, thank you all the same.