1. Home
  2. Forum
  3. Blazor
  4. Move Cursor to position in Blazor RTE

Move Cursor to position in Blazor RTE

Hi

Its possible to implement this functionallity in Blazor?

https://ej2.syncfusion.com/documentation/rich-text-editor/how-to/cursor/

Can you send me a functionall sample, please!

8 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team April 19, 2021 06:27 AM UTC

Hi Jose, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “Is it possible to implement this functionality in Blazor (https://ej2.syncfusion.com/documentation/rich-text-editor/how-to/cursor/), Can you send me a functional sample?” 
 
This can be achieved using the JsInterop concept of the Blazor. We have prepared a sample for your reference, 
 
Code Snippet: 
 
Host.cshtml 
 
<head>  
    . . .  
    <script src="~/jsinterop.js"></script>  
</head>  
 
Index.razor 
 
@using Syncfusion.Blazor.RichTextEditor 
@using Syncfusion.Blazor.Buttons 
 
<SfButton OnClick="@addContent">Set Cursor Pointer</SfButton> 
<SfRichTextEditor ID="defaultRTE" Value="@rteValue" Height="500px" Width="100%"> 
</SfRichTextEditor> 
 
@code { 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
 
    public string rteValue = "<p>The Rich Text Editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>HTML markup</a> or <a rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>markdown</a> of the content</p><p id='key'><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li></ul>"; 
 
    public void addContent() 
    { 
        JsRuntime.InvokeAsync<string>("RichTextEditor.setCursorPointer"); 
    } 
} 
 
jsinterop.js 
 
window.RichTextEditor = { 
    setCursorPointer: function () { 
        var rteInstance = document.getElementById('defaultRTE').blazor__instance; 
        var element = rteInstance.inputElement.querySelector('#key'); 
        var range = document.createRange(); 
        range.setStart(element, 1) 
        rteInstance.formatter.editorManager.nodeSelection.setRange(document, range); 
    } 
} 
 
 
Please check the above code snippets and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


Marked as answer
JL jose luis barajas April 20, 2021 12:47 AM UTC

Hi Revanth

Thanks for your support its great!!!

I still have a question...

How can I move the scroll to the position of the cursor, when I click on the example, if I have a lot of text and I am all the bottom down inside the editor, I have to scroll up to see where the cursor is 


RK Revanth Krishnan Syncfusion Team April 20, 2021 06:20 AM UTC

Hi Jose, 
 
 
Good day to you. 
 
 
We have validated your query “How can I move the scroll to the position of the cursor, when I click on the example, if I have a lot of text and I am all the bottom down inside the editor, I have to scroll up to see where the cursor is”. 
 
This can be achieved by adding the method ‘scrollIntoView’ to the element where the cursor is set. We have prepared a sample for your reference, 
 
Code Snippet: 
 
window.RichTextEditor = { 
    setCursorPointer: function () { 
        var rteInstance = document.getElementById('defaultRTE').blazor__instance; 
        var element = rteInstance.inputElement.querySelector('#key'); 
        var range = document.createRange(); 
        range.setStart(element, 1) 
        rteInstance.formatter.editorManager.nodeSelection.setRange(document, range); 
        element.scrollIntoView(); 
    } 
} 
Note: Here the cursor is set to the last element in the Rich Text Editor. 
 
 
Please check the above code snippet and the sample and let us know if it resolves your issue. 
 
Regards, 
Revanth 


JL jose luis barajas April 20, 2021 06:21 PM UTC

Hi Revanth

Thanks for your support, runs fine!
Have a nice day!

JL jose luis barajas April 20, 2021 10:14 PM UTC

Hi again Revanth 

I need the cursor position from RTE... I'm triying this without success, this code only give the position from current line, I need position from whole document...
can help me?

window.dotNetToJs = {
    getCursorPosition: function () {
        var rteInstance = document.getElementById('defaultRTE').blazor__instance;
        var loc = rteInstance.getRange();
        return loc.startOffset;
    }
};


RK Revanth Krishnan Syncfusion Team April 21, 2021 07:02 AM UTC

Hi Jose, 
 
We have validated your query “To get the cursor position of the Rich Text Editor, I am trying this without success, this code only gives the position from the current line, I need position from the whole document.” 
 
This can be achieved by cloning the range and then changing the range as the whole content and then changing the ‘endoffset’ as original end offset. We have prepared a sample for your reference, 
 
Code Snippet: 
 
window.RichTextEditor = { 
    getCursorPointer: function () { 
        var rteInstance = document.getElementById('defaultRTE').blazor__instance; 
        var element = rteInstance.inputElement 
        var caretOffset = 0; 
        var range = window.getSelection().getRangeAt(0); 
        var preCaretRange = range.cloneRange(); 
        preCaretRange.selectNodeContents(element); 
        preCaretRange.setEnd(range.endContainer, range.endOffset); 
        caretOffset = preCaretRange.toString().length; 
        return caretOffset; 
    } 
} 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


JL jose luis barajas April 22, 2021 09:02 PM UTC

Hi Revanth 

Thanks for your support, its great!

RK Revanth Krishnan Syncfusion Team April 23, 2021 05:05 AM UTC

Hi Jose, 
 
Thanks for the update. 
 
We are glad that the provided solution satisfies your requirement. Please let us know if you need further assistance. 
 
Regards, 
Revanth 


Loader.
Up arrow icon