GetSelectionAsync() return lower letters

[Pandango]

hi.

I want to get the selected string while preserving case.

but method return always lower cases.

Am I using the method incorrectly, or is there another method that does what I want?

Thank you.

[Vinitha Jeyakumar]

Hi Pandango,

We did not encounter any issues, as you reported, while using the GetSelectionAsync function to retrieve the selected text from the Editor. It correctly retrieves both uppercase and lowercase letters without any problems. We have also prepared a video illustration and sample for your reference,

If still issue persists,  share us with the issue replicating code snippet, exact issue replication steps and your Syncfusion package version details to validate further.

Regards,

Vinitha

Attachment: SampleVideo_2e290d6d.zip

[Pandango]

I was wrong, GetSelectionAsync gets the correct case.

But when I set the id in the code below, it is set to all lowercase in the HTML.

string selectedValue = await this.RteObj.GetSelectionAsync();
await this.RteObj.ExecuteCommandAsync(CommandName.FormatBlock, $“h2 id=‘{selectedValue}’”);

I've googled the problem and some places say it's a quirk of HTML and some places say to manipulate the DOM with Javascript to fix it, but I'm believe RTE has options of its own.

Incidentally, what I ultimately want is for the selected text to have its own content as its own id.

Thank you.

[Vinitha Jeyakumar]

Hi Pandango,

Your requirement to have own content as its own id for the selected text can be achieved by using the Jsinterop like below,

Code snippet:

RichTextEditorFeatures.razor

 

<SfRichTextEditor @ref="@RteObj">
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>
<SfButton Content="Format" @onclick="@OnFormatCommand" />


@code {
SfRichTextEditor RteObj;

private async Task OnFormatCommand()
{
await jsRuntime.InvokeAsync<object>("accessDOMElement");

}

Host.cshtml

function accessDOMElement() {
    var Elem = document.createElement("h2");
    var selectedText = window.getSelection();
    if (selectedText.rangeCount) {
        var range = selectedText.getRangeAt(0).cloneRange();
        range.surroundContents(Elem);
        selectedText.removeAllRanges();
        selectedText.addRange(range);
    }
    Elem.id = Elem.innerText;
}

Sample attached below,

Regards,

Vinitha

Attachment: RTE_Server_new_13c91846.zip

[Pandango]

It's work! Thank you! you are my hero

[Vinitha Jeyakumar]

Hi Pandango,

You are welcome.

Regards,

Vinitha