CODEWITHSUNDEEP
javascripthtmlcssquill
Shalvi Muqta
Shalvi Muqta

Reputation: 135

Quill JS white-spaces are not preserved

I've added quill js editor to my website. When I testing it by alerting the content, any text that we inserted after white space is emitted.

Here is my HTML:

<div id="postCommentEditor" class="postCommentEditor ql-align-right ql-direction-rtl"></div>

JS:

const quillEditor = new Quill('#postCommentEditor', {
    modules: {
        toolbar: true,
    },
    theme: 'snow',
});

quillEditor.format('direction', 'rtl');
quillEditor.format('align', 'right');

CSS:

.postCommentEditor {
    height: 100px;
    margin-bottom: 5px;
}

I tried to alert the input in the editor:

let $contentOBJ = $(quillEditor.root).children()[0].innerHTML;
alert($contentOBJ);

So when I type:

aaaa
test

I only get in the alert aaaa..

Upvotes: 0

Views: 1816

Answers (1)

Alex Brohshtut
Alex Brohshtut

Reputation: 2060

It happens because Quill renders HTML and in your case it is something like

<p>aaaa</p>
<p>test</p>

So when you are retrieving content like this:
let $contentOBJ = $(quillEditor.root).children()[0].innerHTML;
You will obviously get only content of the first child, which is aaaa

To get all text use let $contentOBJ = $(quillEditor.root).innerHTML; or quillEditor.getText()

Upvotes: 2

Related Questions