Forum closed. New forum available at http://community.wymeditor.org/

Move the cursor to a specific position

Support forum for WYMeditor.

Move the cursor to a specific position

Postby garann on Fri Feb 19, 2010 7:27 pm

Hi,

I've been reading through the API documentation and this forum, but can't seem to find a way to give focus to the editor and move the cursor to a specific position in the HTML. Is there a function(s) to do this?

Thanks!
Garann
garann
 
Posts: 2
Joined: Mon Dec 28, 2009 9:58 pm

Postby mr_lundis on Thu Apr 01, 2010 12:38 pm

Hi Garann!
The current version of WYMeditor does not provide this functionality, although it's planned for future versions. You'll have to rely on the browser APIs for now. What you can do is to take a look at the wrap/unwrap methods to get an idea of how to access the selections inside the iframe.

Some resources:
http://www.quirksmode.org/dom/range_intro.html

Standard compliant browsers:
https://developer.mozilla.org/en/DOM/Selection
https://developer.mozilla.org/En/DOM/Range

IE:
http://msdn.microsoft.com/en-us/library ... 85%29.aspx
http://msdn.microsoft.com/en-us/library ... 85%29.aspx

If you ever get around to implementing this, drop a line here in the forums or on the Trac site and we'll see how we can incorporate your work into future versions.

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Move the cursor to a specific position

Postby garann on Fri Apr 09, 2010 8:35 pm

Thanks for the response!

I have the browser specific code to set the cursor position in a textarea, but I'm not sure how to get the correct element to set it. Currently, I'm getting the textarea in the WYMeditor control like this and trying to use setSelectionRange/createTextRange on that, which fails:

Code: Select all
$(this._wym._box).find("textarea").get(0)


Do you know which element I should instead try to set the cursor's position on? Or is there some other step I'm missing?

Thanks!
Garann
garann
 
Posts: 2
Joined: Mon Dec 28, 2009 9:58 pm

Re: Move the cursor to a specific position

Postby mr_lundis on Sat Apr 10, 2010 1:24 pm

The editor content lives inside an iframe, which "replaces" the original textarea (the textarea becomes hidden - but is not removed.) So in other words, making selections inside the textarea wont have any effect on the editor content.

But now that I think of it - there is a "internal" method called setFocusToNode for setting focus to a specific node, but it's not documented anywhere. I think it'll do what you're after.

However, while I was looking though the code and testing it out, I also realized that the current implementation were broken in browsers other than IE. Most of the time it's the other way around... Anyway this is fixed since r654, so if you intend to use this feature you'll need to update to r654 or higher.

setFocusToNode takes a DOM node and will move the cursor to either the start or the end (default) of that node's content. Usage:
Code: Select all
var wym = $.wymedtors(0);
wym.setFocusToNode(DOMNode node, boolean toStart);


Now I only need to update the docs. ;)
Cheers!
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Move the cursor to a specific position

Postby liysd on Fri Apr 23, 2010 5:47 pm

I tried to set focus on the begining of new appended element.

Code: Select all
$(wym._doc.body).append('<p class="example"><br /></p>');
wym.update();
wym.setFocusToNode($(wym._doc.body).select(":last-child"),true);


There is an error in coded added to wymedior.js :
Security error" code: "1000
[Break on this error] range.selectNodeContents(node);


What is wrong? Could anybody show me a way to set focus on last element in edited document.
liysd
 
Posts: 7
Joined: Thu Apr 22, 2010 5:07 pm

Re: Move the cursor to a specific position

Postby liysd on Sat Apr 24, 2010 12:11 pm

I've changed code to
Code: Select all
$(wym._doc.body).append('<p class="example"><br /></p>');
wym.update();
var length = $(wym._doc.body).children().length;
wym.setFocusToNode($(wym._doc.body).children()[length-1],true);

and it works, at least in chrome, I tried in firefox and doesn't work at first launch of this function (further is OK).
There is somthing wrong with cursor, sometimes is invisible despite of fact you can write.
I noticed also that I have problems with debuging setFocusToNode in firebug, do you have any idea why?

k.liysd
liysd
 
Posts: 7
Joined: Thu Apr 22, 2010 5:07 pm

Re: Move the cursor to a specific position

Postby mr_lundis on Sat Apr 24, 2010 8:06 pm

There's a bug in earlier versions of WYMeditor when using FF3.6 that causes the caret/cursor not to show at first, even though editing is possible. Although, you should not be affected by that as you're running a version later than r650 (setFocusToNode was reimplemented in r654.) So I'm not really sure whats causing this in FF... Have you tried emptying your cache? ;)

Anyway, the problem with the first code snippet you posted was that setFocusToNode requires a DOMNode and not a jQuery object, but it appears you already figured that out.

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Move the cursor to a specific position

Postby liysd on Mon Apr 26, 2010 3:57 pm

Now it works. I don't know why But I have to launch SetFocusToNode twice to have effect.
Code: Select all
wym.setFocusToNode($(wym._doc.body).children()[0],false);            
wym.setFocusToNode($(wym._doc.body).children()[0],false);      

It doesn't work in IE. I had to add:
Code: Select all
wym._iframe.contentWindow.focus();

before this instructions to work.

I'm not sure it has already been mentioned but there is also a problem in IE7. If there are more than one container it is possible to go out of any container (by pressing down button sufficent number of times or simply by clicking with mouse below last section).
liysd
 
Posts: 7
Joined: Thu Apr 22, 2010 5:07 pm


Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron