Move Editor cursor to next Range

5 posts, 0 answers
  1. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 24 Jun Link to this post

    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.
        ???
      }
    }

     

     

     

  2. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 27 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 27 Jun in reply to Nikolay Link to this post

    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.

  5. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 28 Jun in reply to Nikolay Link to this post

    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.

     

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 29 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready