Move Editor cursor to next Range

[Ruairi]

On the Editor select event I want to move the cursor to the next range depending upon specific criteria. I've seen this link but didnt do what I wanted.

 

Basically I'm using the snippets functionality of Editor control to add MergeFields into the HTML. The snippet looks like this:

<span id='MergeField' style='background-color:blue'>[[Merge Field 1]]</span>

 

When a uses selects this MergeField i.e. places the cursor in it I detect it in the select event then I want to programatically move the cursor into the next range (or after the merge span) so that the user cant mess with the merge fields. How do I move cursor to next range or end of MergeField span?

 

The function is below:

function editorSelect(e) {
  var editor = $("#Content").data("kendoEditor");
  var selection = editor.getSelection();
  var range = editor.getRange();
  var startNode = range.startContainer;
  if (startNode.parentElement && startNode.parentElement.id === 'MergeField') {
    alert('Im a Merge Field!');
    //Move cursor to after the MergeField span.
    ???
  }
}

 

 

 

[Nikolay]

Hello,

Here is a sample dojo where you can see how to move the selection/cursor into specific HTML element - http://dojo.telerik.com/ucUGi.

Additional information could be found in Editor - Working with selection help article.

Regards,
Nikolay
Telerik

 

 

[Ruairi]

Unfortunately thats not going to work (unless I'm missing something). I've already seen the articles you refer to and they dont help either i.e. Editor - Working with selection help article.

The editor content is totally dynamic and all the examples have have the same issue. They are setting the cursor to a 'known' range. In your example for instance you use the <em> tag. I could add a MergeField anywhere in the document for example in the middle of some text or at the end of all the text.

If a User Selects a MergeField I want the cursor to automatically to be placed after the current range i.e. outside the MegreField span so they cant mess with the details I put in the merge field. Maybe its not even possible.

[Ruairi]

Nikolay,

Is there any way to prevent the select event, I tried e.preventDefault() but the text was still selected. Is this a bug?

Its not ideal but I could do my get around the functionality I really desire by preventing the select event if the user selects a merge field.

 

[Marin Bratanov]

Hello Tyler,

The select event is not preventable because it occurs after the user has made a change of the selection.

The Dojo sample my colleague Nikolay created for you shows how to move the selection in the select event and the provided help article should help you understand the range object. Basically, it is up to the developer to determine where the range should start and end and provide those arguments to its methods. So, in a way, in all cases the range should be know, and you will have to traverse the content in order to find the boundaries you need.

Further implementation of this logic is extremely dependent on the concrete project, its requirements and target audience, and if you need further help with building it, I can put you in touch with our contract-based partners. Let me know if you would like me to do that.

Regards,

Marin Bratanov
Telerik