Move the cursor to a specific position

[garann]

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

[mr_lundis]

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!

[garann]

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

[mr_lundis]

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!

[liysd]

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]

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

[mr_lundis]

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!

[liysd]

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).