Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Quill 2 losing data with innerHTML and getting too many breaklines.

See original GitHub issue

I’ve upgraded Quill 1 to 2 in my project and I’m persisting and retrieving the data as HTML with this.quill.root.innerHTML so I could keep the previous data, but I’m getting so much complains about old data being lost, specially lists. I’m debugging now, searching the causes, until now I’ve found that <p> tags are generating <br> tags and so <br> are getting <p> too, if I save many times it gets bigger and bigger.

I’ll try to keep this updated.

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

alecgibsoncommented, Jun 18, 2019

As a side-note, if you’re going to take this approach (which I still don’t advise - you should work with ops to retain true semantics), you may be interested in quill.getSemanticHTML

1reaction

alecgibsoncommented, Jun 18, 2019

Sorry, I was thinking of the clipboard:

const contents = quill.clipboard.convert(myHtml);
quill.setContents(contents);

(This is basically reusing Quill’s ability to parse HTML from the clipboard, which allows for things like different kinds of lists)

Top Results From Across the Web

<pre> tag loses line breaks when setting innerHTML in IE

Setting innerHTML fires up an HTML parser, which ignores excess whitespace including hard returns. If you change your method to include the ...

Strip HTML Tags in JavaScript - CSS-Tricks

Because strip_tags() does not actually validate the HTML, partial or broken tags can result in the removal of more text/data than expected.

Problem with the line break — DataTables forums

It is about editing the editor.quill.js file by changing these lines. get: function ( conf ) { return conf._quill.root.innerHTML; },.

Element.innerHTML - Web APIs | MDN

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

What is the Disadvantage of using innerHTML in JavaScript

Where the return value represents the text content of the HTML element. It allows JavaScript code to manipulate a website being displayed. More ......