Submit Form Value with Quill Rich Text Editor does not translate into HTML

Question

I implemented the quill editor into one of my website forms to save the html value in my database. Unfortunately it saves the raw value - not the html format. Somehow it does not translates the string into HTML. Any idea how to solve this issue?

What i expect:

        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>

What i get:

{"ops":[{"insert":"Hello World!\nSome initial "},{"attributes":{"bold":true},"insert":"bold"},{"insert":" text\n\n"}]}

The code:

        <form id="new-notes-form" class="mt-3">
        <div class="form-group">
            <h5><?php echo trans('leave_comment'); ?></h5>
            
            
            <!-- START QUILL Rich Text Editor -->
                
                <!-- Include stylesheet -->
                <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">


                <!-- Create the editor container -->
                <input name="comment" type="hidden">
                <div id="editor">
                  <p>Hello World!</p>
                  <p>Some initial <strong>bold</strong> text</p>
                  <p><br></p>
                </div>
                
                <!-- Include the Quill library -->
                <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

                <!-- Initialize Quill editor -->
                <script>
                    var quill = new Quill('#editor', {
                      modules: {
                        toolbar: [
                          ['bold', 'italic'],
                          ['link', 'blockquote', 'code-block', 'image'],
                          [{ list: 'ordered' }, { list: 'bullet' }]
                        ]
                      },
                      placeholder: 'Notiz hier eingeben...',
                      theme: 'snow'
                    });

                    var form = document.querySelector('#new-notes-form');
                    form.onsubmit = function() {
                      // Populate hidden form on submit
                      var comment = document.querySelector('input[name=comment]');
                     
                      comment.value = JSON.stringify(quill.getContents());
                      // DOES NOT WORK comment.value = JSON.stringify(quill.root.innerHTML);

                     
                      // console.log("Submitted", $(form).serialize(), $(form).serializeArray());
                      
                      // No back end to actually submit to!
                      // alert('Open the console to see the submit data!')
                      // return false;
                      
                    };
                </script>
                
            <!-- START QUILL Rich Text Editor -->
            
        </div>
        <div class="form-group">
            <button class="btn btn-primary" id="btn-comment" type="submit">
                <?php echo trans('save-note'); ?>
            </button>
        </div>
    </form>

Answer 1

You can use quill.root.innerHTML to retreive the html content of your editor.

Check out this bin for more https://jsbin.com/fipomudura/1/edit?html,console,output

Kindly accept it as answer if it works for you, thanks!