1. Home
  2. Forum
  3. Blazor
  4. highlighting text programmatically

highlighting text programmatically

Is there a way to programmatically highlight a portion of the text in the RTE?  Like setting the background color of a portion of the text in code?



7 Replies
GK Gunasekar Kuppusamy Syncfusion Team August 4, 2021 04:14 PM UTC

Hi Rob, 

Currently, we are validating the reported query and we will update you with further details tomorrow (5th August)

We appreciate your patience until then.

Regards, 
Gunasekar


GK Gunasekar Kuppusamy Syncfusion Team August 6, 2021 02:10 PM UTC

Hi Rob, 

Greetings from Syncfusion support.

We have validated your query "Is there a way to programmatically highlight a portion of the text in the RTE?  Like setting the background color of a portion of the text in code?"

Yes, we can achieve this requirement by applying background style to the particular text using RichTextEditor ExecuteCommand method and the `jsinterop` . We have prepared a sample for your reference, 

In the below sample, we have manually selected the text and applied the background color.

Code snippets:

wwwroot/jsinterop.js 
window.RichTextEditor = {
    setBackground: function () {
        var rteInstance = document.getElementById('defaultRTE').blazor__instance;
        rteInstance.formatter.editorManager.nodeSelection.setSelectionText(
            document, rteInstance.inputElement.childNodes[0].childNodes[0], rteInstance.inputElement.childNodes[0].childNodes[0], 9, 20);
        return true;
    }
}

_Host.cshtml
<head> 
            … 
            … 
            <script src="jsinterop.js"></script> 
</head> 

Index.razor 
<SfButton OnClick="SetBackround">Apply</SfButton>
<SfRichTextEditor ID="defaultRTE" Placeholder="Enter Some Content">
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>

@code {

    [Inject]
    IJSRuntime JsRuntime { get; set; }

  private async Task SetBackround()
  {
    await JsRuntime.InvokeAsync<bool>("RichTextEditor.setBackground");
    await this.RteObj.ExecuteCommandAsync(CommandName.BackgroundColor, "yellow");
  }
    . . .
}


Please check the sample let us know if the solution meets your requirements

Regards,
Gunasekar 


RO Rob August 7, 2021 11:30 AM UTC

Hi


Thanks for the sample code.  


Unfortunately, part of what I'm doing is converting the rich text into a word document, and for that EnableXhtml=true is configured on my SfRichTextEditor (otherwise it causes problems with the word conversion)


When I enable that option the selector stops working.


GK Gunasekar Kuppusamy Syncfusion Team August 9, 2021 11:57 AM UTC

Hi Rob,

Greetings from Syncfusion support.

We have validated the reported query "Unfortunately, part of what I'm doing is converting the rich text into a word document, and for that EnableXhtml=true is configured on my SfRichTextEditor"

We have added the root element for the RichTextEditor content while enabling EnableXhtml property. So the selection is not properly selected the child text.

We have modified the sample for your reference.

Code snippets:
 document, rteInstance.inputElement.childNodes[0].childNodes[0].childNodes[0], 
rteInstance.inputElement.childNodes[0].childNodes[0].childNodes[0], 9, 20);

Sample: https://www.syncfusion.com/downloads/support/forum/167805/ze/RichTextEditor_Test-404387935

Please check the sample and update us if the sample helps,

Regards,
Gunasekar


FA Fadi Alakkad April 25, 2022 10:51 AM UTC

it gives an error when I do mulitable selection 


BS Buvana Sathasivam Syncfusion Team April 27, 2022 06:17 PM UTC

Hi Fadi,


Currently, we are checking your reported query. We will update you with further details on or before April 29, 2022.


Regards,

Buvana S


BS Buvana Sathasivam Syncfusion Team April 29, 2022 05:26 PM UTC

Hi Fadi,


Thank you for your patience.


You should be able to achieve your requirements using a Document Editor. We provide support for selecting and highlighting the current word, line, and paragraph. To achieve your requirement, you have to move the selection to the place where you need to highlight it.

We have created a sample based on your requirement, please find the sample from below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/balzorselectionsample-521091672

Steps to run the above sample.

  1. Run the sample.

  2. Open a word document using the open button in toolbar.

  3. Click on select and highlight button


Code snippet:

 

       SelectionSettings settings = new SelectionSettings() { Extend = false, X = 100.0, Y = 200.0 };

       SelectionSettings settings1 = new SelectionSettings() { Extend = false, X = 100.0, Y = 400.0 };

 

        SfDocumentEditor editor = container.DocumentEditor;

//move selection to line

        await container.DocumentEditor.Selection.SelectAsync(settings);

//select current line

        await container.DocumentEditor.Selection.SelectLineAsync();

//highlight selected line

    container.DocumentEditor.Selection.CharacterFormat.SetHighlightColorAsync(HighlightColor.Pink);

 

//same for another line

        await container.DocumentEditor.Selection.SelectAsync(settings1);

        await container.DocumentEditor.Selection.SelectLineAsync();

        container.DocumentEditor.Selection.CharacterFormat.SetHighlightColorAsync(HighlightColor.Red);

 


You can move the selection to the needed place using the select API.

To know more about select API please refer below link.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectAsync_Syncfusion_Blazor_DocumentEditor_SelectionSettings_


Once you have moved to the place you can then select either the word or line or paragraph.

For selecting a line ‘SelectLineAsync’ API should be used.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectLineAsync

For selecting a paragraph ‘SelectParagraphAsync’ API should be used.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectParagraphAsync

For selecting a word ‘SelectCurrentWordAsync` API should be used.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectCurrentWordAsync_System_Boolean_

Once the text was selected , you can add you desired highlight color for the selected content using the SetHighlightColorAsync API

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionCharacterFormatModule.html#Syncfusion_Blazor_DocumentEditor_SelectionCharacterFormatModule_SetHighlightColorAsync_Syncfusion_Blazor_DocumentEditor_HighlightColor_


Please let us know if you need any further assistance


Regards,

Buvana S


Loader.
Up arrow icon