Adding unwanted newlines when pasting

See original GitHub issue

Version 1 beta 4 (https://cdn.quilljs.com/1.0.0-beta.4/quill.js)

When pasting HTML containing a header tag (e.g. <h1>) and a paragraph (<p>) an extra, unwanted, newline character is prepended in the delta object for the paragraph, resulting in an empty paragraph being inserted.

Steps for Reproduction Using jQuery. Assuming this DOM

<div id="editor"></div>
<script type="text/javascript">
var quill = null;
$(function() {
    quill = new Quill('#editor', {theme: 'snow' });
    quill.pasteHTML('<h1>headline</h1><p>Content</p>');

    console.log(JSON.stringify(quill.getContents().ops));
    // [{"insert":"headline"},{"attributes":{"header":1},"insert":"\n"},{"insert":"\nContent\n"}]

    console.log($('#editor .ql-editor').html());
    // <h1>headline</h1><p><br></p><p>Content</p>

    quill.pasteHTML($('#editor .ql-editor').html());

    console.log(JSON.stringify(quill.getContents().ops));
    // [{"insert":"headline"},{"attributes":{"header":1},"insert":"\n"},{"insert":"\n\nContent\n"}]

    console.log($('#editor .ql-editor').html());
    // <h1>headline</h1><p><br></p><p><br></p><p>Content</p>
});

Expected behavior: I’d expect the output of console.log($('#editor .ql-editor').html()); to match the input from quill.pasteHTML('<h1>headline</h1><p>Content</p>');

Actual behavior: An extra <p>&nbps;</p> tag is inserted. (Speculation:) Possibly because the header attribute is put on the newline character following the actual headline, instead of the headline itself.

Platforms: Latest Chrome

Version: [version]

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

19reactions
JMacLulichcommented, Sep 22, 2016

@lordenzo I’ve run into the same problem, I’m getting <p> tags inserted around every <br/> tag which means the spaces between sections of text is 3 or 4x larger than it was in the original content.

I’m having a bit of trouble understanding how to stop this behaviour from happening, do you mind copying and pasting the code you added to stop <p> tags here so I can take a look?

Kind regards, Jason.

9reactions
rtmcommented, Mar 11, 2017

I am using the primeng wrapper around Quill. If I have an ordered list (<ol>), then each time I enter the editor, which pastes the current HTML into the editor, I get an extra <p><br/></p> inserted into the HTML at the beginning of the list. I wonder if there is some real simple option to disable this behavior, such as DONT_PUT_IN_EXTRA_P_TAGS, or something similar. I understand that I might be able to deal with this problem by using a “matcher”, but I really would prefer not to have to go to all that trouble.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple unwanted line breaks/newline added when copy ...
Multiple unwanted line breaks/newline added when copy/pasting using Android. Hi, so fairly simple, I'm trying to copy/paste text from my Google ...
Read more >
Quill Adding Unwanted Line Breaks to Posted Text <p><br></p>
When pasting or typing text Quill is adding unnecessary line breaks to text, thus not working as a WYSIWYG editor, additionally it brings...
Read more >
Pasting code into the code macro adds unwanted newlines.
When I copy code into the code macro, there are newlines added for every line of code. I then I have to delete...
Read more >
How to paste from Notepad into Word without getting extra line ...
Select all text (e.g. Control-A), right-click the selected text, then select Paragraph. Check the box "Don't add space between paragraphs of the ...
Read more >
How can I add line breaks when copying & pasting list items?
Possible duplicate of How to add extra info to copied web text · I edited my question to explain why it's different! ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found