CODEWITHSUNDEEP
javascriptquill
anekix
anekix

Reputation: 2563

quilljs whitespaces/indentations not being preserved

HI i am using quilljs for simple rich text editor. i have a decent working solution but one problem i am facing is when i save the contents of editor spaces are being lost. here is the code below enter some image and put space in front of it and then click on save button to see the current output.

expected: spaces/indentations should be preserved.

code:

<html>

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<body>
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>
<input type=button onclick="savei()" value="save"/>
</body>
<hr>
<div id="res"></div>
</html>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.1/quill.js"></script>
<script src="img-resize.js"></script>

<!-- Initialize Quill editor -->
<script>

            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [ 'link', 'image', 'video', 'formula' ],          // add's image support
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean']                                         // remove formatting button
            ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },

            theme: 'snow'
        });


function savei(){
console.log(quill.getContents())
var x = document.getElementById("res");
x.innerHTML = quill.root.innerHTML;
console.log(x);
}
</script>

Upvotes: 2

Views: 4395

Answers (1)

user2395305
user2395305

Reputation:

White space is collapsed to a single space. Th editor has the white-space property set to pre which preserves it. Just add this to your CSS:

#res {
  white-space: pre;
}

Upvotes: 5

Related Questions