Using Multiline TextArea in the InPlaceEditor

I am trying to use in the InPlaceEditor to return a MultiLine text box. I can get a single line text box and the RTE control, but I need the ability to return non-HTML text with line breaks.

I have tried adding a <textarea> tag with these instructions: https://ej2.syncfusion.com/javascript/documentation/in-place-editor/integration/ and this code

<textarea id="TextNotes">

This gives me the multiline box (see attached), but:

1. Hitting the return key closes the control ( i need it to give a line break. I will submit the data by clicking on the tick )

Please advise?

Hello Craig, 

Thanks for using Syncfusion Products. 

  

We have checked your requirement, if you wish to submit the data only on button click than you can disable the submitOnEnter property. In-place Editor supports adding HTML5 input elements using the template property. If you wish to show the non-HTML text with line breaks after submitting the value, you can add white-space as pre-wrap on ‘.e-editable-value’ class name using Styles. Please find the below code for your reference. 

[Index.ts] 

[Index.html]  

  

Sample: https://stackblitz.com/edit/nrcjtp-jrctpb?file=index.html 

  

In above sample, we have rendered the In-place Editor component with text area using template property and shown the In-place Editor component with line breaks and also prevented the submit action when enter key pressed. 

API link: https://ej2.syncfusion.com/documentation/api/inplace-editor#submitonenter 

Let us know if you need any further assistance on this. 

Regards, 

Prince