Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
470
How the new lines are added
posted

Hi,

I am using Infragistics v13.2. I was looking at the functionality of WebHTMLEditor.

I noticed that in design tab, every line that is entered is added as a new <div>. Is there any way where Instead of adding as a new div, a <br> can appended ?

Like - 

In design tab if i type 

This is line one

This is line two
In HTML tab it shows
This is line one<div>This is line two</div>

I would like to have the HTML string as 
This is line one<br>This is line two
  • 17590
    Verified Answer
    Offline posted

    Hello Vaishnavi,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is using the UseLineBreak property of WebHtmlEditor. This property gets or sets a value which determines how enter key presses behave. If it is set to true enter key presses insert a BR tag, if it is set to false enter key presses insert a <div>/<p>/<br> tag depending on the browser. Please note that the tag that is going to be inserted when the property is browser specific (Internet Explorer inserts <P> tag, Chrome inserts <div> tag, Firefox inserts<br> tag by default). Additionally, keep in mind that when the property is set to true, in order to get the <br> Enter key should be pressed in combination with Shift key (Shift + Enter).

    Some further reference about UseLineBreak property could be found at:

    http://help.infragistics.com/Help/Doc/ASPNET/2014.1/CLR4.0/html/Infragistics4.WebUI.WebHtmlEditor.v14.1~Infragistics.WebUI.WebHtmlEditor.WebHtmlEditor~UseLineBreak.html

    Alternatively, you could capture the KeyDown client side event for the WebHtmlEditor. In this event the key code could be checked and if the sender of the event is the enter key you could get reference to the current content of the editor as string (using getText() function). Afterwards, depending on the browser, the <div> tag(for chrome browser) could be replaced with br tag. For example:

    function WebHtmlEditor1_KeyDown(oEditor, keyCode, oEvent) {

    if (keyCode == 13) {

    //get reference to the editors text

    var editorText = oEditor.getText();

    if (navigator.userAgent.indexOf("Firefox") != -1) {

    // alert("Firefox");

    }

    if (navigator.userAgent.indexOf("Chrome") != -1) {

    //replace <div> tags with <br> tags

    }

    var isIE = false || !!document.documentMode;

    if (isIE) {

    //replace <p> tags with <br> tags

    }

    }

    }

    Please keep in mind that this is as custom approach and in order to ensure that it is working as expected you should test all the aspects of the editor in details.

    I hope you find this information helpful.

    Please feel free to contact me if you need any further assistance with this matter.