使用 Quill 富文本编辑器提交表单值不会转换为 HTML

Question

我在我的网站表单之一中实现了 quill 编辑器，以将 html 值保存在我的数据库中。不幸的是，它保存了原始值——而不是 html 格式。它不会以某种方式将字符串转换为 HTML。知道如何解决这个问题吗？

我的期望：

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

我得到的是：

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

代码：

        <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

您可以使用 quill.root.innerHTML 检索编辑器的 html 内容。

查看此箱了解更多信息https://jsbin.com/fipomudura/1/edit?html,console,output

如果对您有用，请采纳为答案，谢谢！

使用 Quill 富文本编辑器提交表单值不会转换为 HTML

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

javascript

rich-text-editor

quill