unneeded line break.... <p><br></p>

[cjaoude]

Is this normal?

It seems grabbing the innerHTML results in unneeded <p><br></p> spacing wherever there is blank line. I can filter it out for now, but is it an issue to address in Quill?

tnx

[gaborsar]

That is needed because otherwise you could not put your cursor into the empty line, the browser would ignore it.

[gaborsar]

http://stackoverflow.com/questions/17714340/cant-get-to-empty-paragraphs-in-contenteditable
http://stackoverflow.com/questions/4063144/setting-the-caret-position-to-an-empty-node-inside-a-contenteditable-element

[cjaoude]

I fixed it in the editor CSS. By changing the p tag to have a sufficient margin-bottom, it makes it unnecessary for the user to enter a blank line for the sake of visual separation. It is naturally visually spaced out. Which is actually correct way to do it from a DTP/typography approach.

</p>
    // margin-bottom
<p>

instead of 
</p>
    <p><br></p>
<p>

maybe an adjustment that can be made to the Quill theme css

[jhchen]

@gaborsar is correct and I elaborated more on this here. CSS could work but I'm not sure this is a robust solution in all browsers--though this is also moot because of the structure constraints I described.

[cozzbie]

string.replace("<p><br></p>", "");

Thats all I have to say.

[rdzakmic]

Hi, is it posible (and how can be done) to remove <br> and to put <br/> ?
Thanks.

[jhchen]

<br> vs <br/> is an HTML5 vs XHTML thing nothing to do with Quill. Take a look into doctype for more info.

[jaesung2061]

Is there a way to make it so that each paragraph is separate? People shouldn't be separating paragraphs with an empty paragraph/br element in between. Should I just give a margin-bottom to all paragraphs?

[davidfurlong]

I think that the correct behaviour should be to not create adjacent <p> tags unnecessarily. <p> tags don't copy paste across text editors well and <p> tag top/bottom margin in the editing experience is unlike most text editors users are used to. A new line should just take you to the next line. That is, insert a <br/> tag, not a new <p></p> tag with a <br/> tag. Editing should be as close to the rendered output as possible (It is a WYSIWYG after all), so adding margins on <p> tags in the rendered output but not the editor is probably a poor decision.

What am I missing?

[Haaxor1689]

Finally found solution to this and many related issues. #1379 (comment)

[edjw]

string.replace("<p><br></p>", "");
Thats all I have to say.

That would only replace the first instance of <p><br></p>

See https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/#replacing-multiple-strings

[twistedpixel]

Does anyone have an actual solution to this or is the current solution still "don't use Quill"?

[lagden]

@twistedpixel

https://codepen.io/mackermedia/pen/gmNwZP

[hosnyben]

@twistedpixel

https://codepen.io/mackermedia/pen/gmNwZP

You saved my life with this codepen.

[Edmond-le-Grand]

I was facing the same problem and designed a hack for myself. Someone might find it useful

`var justHtml = quill_editor.root.innerHTML;

    if($.trim(($(justHtml).text())).length == 0){
        justHtml = null;
    }

    // for removing trailing <p><br></p> and empty ending paragraphs
    if(justHtml != null){

         // construct a new element with the data collected from the quill editor
        var new_html_construct = $("<div>"+justHtml+"</div>");

        if($("p:last-child", new_html_construct).html() == "<br>" || $.trim($("p:last-child", new_html_construct).text()).length == 0){
            $("p:last-child", new_html_construct).remove()
        }

        // replace my_exportation_data_input by the input which serves as buffer for your quill editor
        $('my_exportation_data_input').val(new_html_construct.html());

    }else{
        $('my_exportation_data_input').val(null);
    }`

With this code, i was able to safely remove only trailing empty paragraphs. The reason i am using :last-child is because, sometimes, users space out the script themselves using the enter key. to keep those spacing, only the last paragraph should be targeted. Also, one may wonder if this does not affect the html in the quill editor, well no. This code runs on input event. Therefore, the check is done whenever a user enters something. If the user for instance presses the enter key without typing anything, the innerhtml saved in the exportation input will be without the last paragraph entered by the user. In case the user continues typing, the paragraph will therefore fail to be removed using the (p:last-child).remove()

[Edmond-le-Grand]

to remove all trailing empty paragraphs whether at the end or the beginning, replace the "if" statement with a "while" statement. To remove trailing beginning while space, add a while statement that makes use of :first-child

[chinmaypkelkar]

string.replaceAll("<p><br></p>", "");

[lainfox]

To remove duplicates but leave one instance.

const noNewLines = html.replace(/(<p><br><\/p>)+/g, "$1")

[tae997]

string.replace("<p><br></p>", "");

Thats all I have to say.

Hey @cozzbie it was nice idea and trust me in between serious conversation reading this kind of reply lighten my mood. Anyway let me put this question in my way -

So I replaced my <p> with <div> in quill because I'm creating a blogger site where user not be interested to know about how this editor works. When user pasted content every paragraph looks like congested but in reality it have enough space to in between all <p>. User add break between every para which make it double break so avoid this issue I replaced <p> to <div>.

Now the problem is that before and end of text unwanted break tag getting added link this:

<div><br/></div> 
<div> Hey there! </div>
<div><br/></div> 

In case there are 2 paragraph and user added break in between para then it will looks like -

<div><br/></div> 
<div> Hey there! </div>
<div><br/></div>
<div> Hope you are doing well.</div>
<div><br/></div>

I want to remove only starting and ending of <div><br/></div> not the middle one. What should I do.

Any help with this would be greatly appreciated. Thank you in advance.

[raphaelsetin]

I came up with this regex here, I hope it helps someone:

const processedHtml = html.replace(/(^([ ]*<p><br><\/p>)*)|((<p><br><\/p>)*[ ]*$)/gi, "").trim(" ");

It replaces all beginning and ending instances of <p><br></p>. It also doesn't care about whitespaces in the beginning or end of the html string; and finally, it trims any remaining whitespaces.

[alissonguedes]

As @gaborsar replied

This is necessary because otherwise you couldn't place the cursor on the empty line, the browser would ignore it.

I solved my problem with CSS as follows:

<style> .ql-editor p { margin: 0 0 15px } </style>

In HTML, where the text result will be displayed, you can also do it in the ql-editor style.