RTE pastecleanupsettings prompt enter key unwanted hehavior

[Khalid Mahmood]

I have enable pastecleanupsettings prompt for RTE. Prompt Shows on paste content but when Enter Key pressed it doesn't paste content instead it submits my form. Prompt buttons works fine but Enter Key isn't work intended 

[Vinitha Jeyakumar]

Hi Khalid,

Your reported issue can be resolved by changing the type of the submit button in the form to type as "button". please check the code below,

Code snippet:

<form method="post">

                     <ejs-richtexteditor id="api" >          

                    <e-richtexteditor-pastecleanupsettings Prompt="true"></e-richtexteditor-pastecleanupsettings>

                </ejs-richtexteditor>

                    <div id="submitbutton">

                        <button id="submitButton" type="button">Submit</button>

                    </div>

                </form>

Regards,

Vinitha

[Khalid Mahmood]

By Changing Button type submit -> button. How to submit a form ? Adding extra event listener to button and submit form manually that isn't intended because there would have to add extra code everywhere RTE is used and in my application I have too many pages those used RTE. Then there supposed to lot of files to be changed.

[Vinitha Jeyakumar]

Hi Khalid,

The reported issue occurs since the prompt dialog is rendered inside the RichTextEditor instead of body and thus the enter key actions triggered the submit. To resolve this issue, you can prevent the default action on keypress inside the prompt dialog by using the dialogOpen event. please check the code below,

Code snippet:

  <form method="post">

                     <ejs-richtexteditor id="api" dialogOpen="Open">                  

                   

                    <e-richtexteditor-pastecleanupsettings Prompt="true"></e-richtexteditor-pastecleanupsettings>

                </ejs-richtexteditor>

                    <div id="submitbutton">

                        <button id="submitButton">Submit</button>

                    </div>

 </form>
<script>

function Open(){    if(document.getElementById("api_pasteCleanupDialog").classList.contains("e-popup-open"))

{        document.getElementById("api_pasteCleanupDialog").addEventListener("keypress", function(args){

        args.preventDefault();

        })

    }

}

</script>

Regards,

Vinitha

[Khalid Mahmood]

RTE Enter key is configured 

enterKey="DIV" shiftEnterKey="BR"

it should not submit form.

Enter Key intended action should be dialog OK button action if dialog is opened

[Gokulraj Devarajan]

Hi Khalid,

We have validated your query.

Query 1: Enter key and Shift-Enter Key configured should not submit the form 

Yes, you can achieve enter and shift enter not to submit the form.

Query 2: When the dialog is opened the enter action should only perform dialog-specific action

We have created a sample to achieve this use case. We used the "DialogOpen" event, which will be triggered after the dialog is opened. We then added an event listener to the respective dialog element. Now, when the enter key is pressed, the newly added event listener checks for the code value and calls the "preventDefault()" method. After this, we removed the event listener in the "BeforeClose" event, which will be triggered before the dialog is closed.

Please find the attached code snippet and the sample for your reference.

Code Snippet:

@using Syncfusion.EJ2.RichTextEditor

 

<form method="post">

    <ejs-richtexteditor id="api" dialogOpen="onDialogOpen" beforeDialogClose="beforeClose" enterKey="DIV" shiftEnterKey="BR">

        <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>

        <e-richtexteditor-pastecleanupsettings Prompt="true"></e-richtexteditor-pastecleanupsettings>

    </ejs-richtexteditor>

    <div id="submitbutton">

        <button id="submitButton" type="submit">Submit</button>

    </div>

</form>

<script>

    var dialogElem;

    function onDialogOpen(args) {

        var tableDialog = document.getElementById("_tabledialog");

        var pasteCleanupDialog = document.getElementById("api_pasteCleanupDialog");

        var insertLinkDialog = document.getElementById("_rtelink");

        var dialog = (tableDialog && tableDialog.classList.contains("e-dialog")) ? tableDialog :

                (pasteCleanupDialog && pasteCleanupDialog.classList.contains("e-dialog")) ? pasteCleanupDialog :

                (insertLinkDialog as&& insertLinkDialog.classList.contains("e-dialog")) ? insertLinkDialog : null;

        if (dialog) {

            dialog.addEventListener('keypress', handleEnterKeyPress);

            dialogElem = dialog;

        }

    }

    function handleEnterKeyPress(args) {

        if (args.code === "Enter") {

            args.preventDefault();

            console.log("Enter action prevented");

        }

    }

    function beforeClose() {

        if (dialogElem) {

            dialogElem.removeEventListener('keypress', handleEnterKeyPress);

        }

    }

</script>

API: https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_DialogOpen

NOTE: Please check the id for the respective dialog element variables used above in your application.

Regards

Gokulraj Devarajan

Attachment: RTE_Inside_Form_5c49752.zip