1. Home
  2. Forum
  3. Blazor
  4. Catching an "Enter" in the Rich Text Editor

Catching an "Enter" in the Rich Text Editor

Is it possible to call an event or action when someone presses enter in the rich text editor?

5 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team November 11, 2020 10:35 AM UTC

Hi Paul,

Greetings from Syncfusion support, 
 
We have validated your reported query. Currently, we don’t have any built-in event for capturing the enter key action in the Rich Text Editor. But you can achieve the requirement, by using the JsInterop concept binding the keyup event for the Rich Text Editor content area.  
 
Do you want an sample for the above mentioned scenario using the JsInterop ? 
 
Regards, 
Indrajith 


PA Paul November 11, 2020 10:42 AM UTC

Hi Indrajith 

If you have an example then that would be fab yes please

Thanks

IS Indrajith Srinivasan Syncfusion Team November 12, 2020 08:28 AM UTC

Hi Paul, 
 
Good day to you, 
 
We have prepared a sample meeting your requirement of catching the enter key action in the Rich Text Editor. Check the below shared code blocks and sample for reference. 
 
wwwroot/jsinterop.js 
 
 
window.RichTextEditor = { 
            onCreated: function () { 
                        RTEContent = document.querySelector('.e-richtexteditor .e-rte-content .e-content'); 
                        RTEContent.addEventListener('keyup', function (args) {                                 
                        if (args.keyCode === 13 && args.key === "Enter") { 
                                    //Peform your enter key action 
              } 
            }); 
                         
    } 
} 
 
host_cshtml 
 
 
<head> 
    ... 
    ... 
    <script src="~/jsinterop.js"></script> 
</head> 
 
Index.razor 
 
 
@using Syncfusion.Blazor.RichTextEditor 
 
<SfRichTextEditor> 
    <RichTextEditorEvents Created="@onCreated"></RichTextEditorEvents> 
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p> 
    <p><b>Get started Quick Toolbar to click on the image</b></p> 
    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p> 
</SfRichTextEditor> 
 
 
@functions 
    { 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
 
    public void onCreated() 
    { 
        JsRuntime.InvokeAsync<string>("RichTextEditor.onCreated"); 
    } 
 
} 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Marked as answer
PA Paul November 12, 2020 09:50 AM UTC

This doesn't quite work sorry.  If you have the editor bound to a value:

<SfRichTextEditor>
    <RichTextEditorEvents Created="@onCreated" @bind-Value="@EditorText"></RichTextEditorEvents>
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the image</b></p>
    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
</SfRichTextEditor>

EditorText isn't updated until you move focus away from the editor.  So when you press enter, @EditorText is still blank here.


IS Indrajith Srinivasan Syncfusion Team November 13, 2020 07:45 AM UTC

Hi Paul, 

Good day to you, 
We have checked the shared code blocks. You have wrongly used the Rich Text Editor property @bind-Value in the RichTextEditorEvents tag. Also, you have binded value for the editor in both ways(Using Value property and withing tags as ChildContent). Can you bind the value for the editor in any of the following ways ? 
 
Bind Rich Text Editor value using Value property: 
 
 
<SfRichTextEditor SaveInterval=1 @bind-Value="@EditorText" > 
    <RichTextEditorEvents Created="@onCreated" ></RichTextEditorEvents> 
</SfRichTextEditor> 
 
 
Bind Rich Text Editor value within tags: 
 
 
<SfRichTextEditor SaveInterval=1> 
    <RichTextEditorEvents Created="@onCreated" ></RichTextEditorEvents> 
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p> 
    <p><b>Get started Quick Toolbar to click on the image</b></p> 
    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p> 
</SfRichTextEditor> 
 
 
By default, the editor value will be updated after an SaveInterval time of 1000ms. In order to update the value of the editor immediately, we suggest you to set the SaveInterval property as 1. 
 
Please get back to us if you face any difficulties, 
 
Regards, 
Indrajith 


Loader.
Up arrow icon