Using the Enter key to submit a form with rich text editor

[Matthew Paul]

Hi there, I'm using the Rich Text Editor as a text input on a chat form to allow the user to add some simple formatting to their messages.

I'd like it so when the user presses 'Enter' for it to not do anything within the editor (no new paragraph) and instead call an action (submit the form to post their message). Then I can use Shift+Enter if they actually want a new line.

Is this possible to do? I can see instructions for changing what 'enter' and 'shift-enter' do (Enter key customization in RichTextEditor | Syncfusion) but this just changes the type of new line.

[Vinothkumar Yuvaraj]

Hi Matthew Paul,

We have reviewed your query and successfully implemented a solution to achieve your requirement. Specifically, we prevent the Enter key action using args.Cancel = true within the OnActionBegin event, and by calling preventDefault in the keydown event. We submit the form by calling the submit method. Please refer to the following code snippet and the attached sample for your reference.

index.razor

            <EditFormModel="@Model" id="formElement">

                <SfRichTextEditorID="rich-text-editor" ShiftEnterKey="ShiftEnterKeyTag.P">

 

                  <RichTextEditorEventsOnActionBegin="@actionBegin" Created="@created" ></RichTextEditorEvents>

                </SfRichTextEditor>

            </EditForm>

 

@code {

    public void actionBegin(ActionBeginEventArgs args)

    {

        if (args.RequestType == "EnterAction")

        {

args.Cancel = true;

        }

    }

    private async Task created()

    {

         await JS.InvokeVoidAsync("enterAction");

    }

}

   <script>

       function enterAction() {

           var elemnt = document.querySelector( "#"+sfBlazor.instances["rich-text-editor"].id + "_rte-editable[contenteditable='true']");

elemnt.addEventListener("keydown", (e) => {

               if (e.keyCode == 13 && !e.shiftKey) {

                 e.stopPropagation();

                 e.preventDefault();

                 // You can call the forum submit method here.

               }

           })

       }

   </script>

However, pressing Shift+Enter still creates an unwanted <br> element. We have considered the issue, “ShiftEnterKeyTag P with OnActionBegin event creates extra BR tag when wressing Shift Enter" as a bug from our end, and the fix for the issue will be included in our upcoming Volume 3 2024 release, which is expected to be rolled out by the middle of September 2024.

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/60638/shiftenterkeytag-p-with-onactionbegin-event-creates-extra-br-tag-when-wressing

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

API Link :https://blazor.syncfusion.com/documentation/rich-text-editor/events#onactionbegin

Regards,

Vinothkumar

Attachment: BlazorServerProject_f9892b91_4ca894dd.zip

[Yaswin Vikhaash Rajaretenam]

Hi Matthew Paul ,

We have included the fix for the issue "ShiftEnterKeyTag.P with OnActionBegin event creates extra <br> tag when wressing Shift+Enter" with our package version 26.2.14. So, can you please upgrade your package to the latest to resolve the issue from your end.

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/26.2.14?type=all#docio

Regards,

Yaswin Vikhaash