如何在编辑器外部将Quill文本格式化为HTML？

Question

我有一个表单，可将​​Quill编辑器的内容发布到PHP脚本中。然后，PHP脚本将文本保存到数据库。以后可以将相同的文本加载到“笔管”编辑器中。一切正常，并按预期显示。

仅供参考，我正在使用的代码如下：

<input name="editor1" type="hidden">
<div id="editor-container"></div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    var quill = new Quill('#editor-container', {
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline'],
                            [{ list: 'ordered' }, { list: 'bullet' }]
                        ]
                    },
                    theme: 'snow'
                    });
    var form = document.querySelector('form');
    form.onsubmit = function() {
        var description = document.querySelector('input[name=editor1]');
        description.value = JSON.stringify(quill.getContents());
        return true;
    };

    <?php
    if (isset($description)) {
    ?>
    quill.setContents(<?=$description?>);
    <?php
    }
    ?>
</script>

问题是这样的：

我不想每次想显示使用Quill编辑器生成的文本时都必须加载Quill编辑器。我希望能够在使用HTML格式化的普通网页上显示此文本。

例如，如果有人在“羽毛笔”编辑器中键入以下内容：

hello

 - this is in a list

***bye!***

我希望能够得到输出：

{"ops":[{"insert":"hello\nthis is in a list"},{"attributes":{"list":"bullet"},"insert":"\n"},{"attributes":{"italic":true,"bold":true},"insert":"bye!"},{"insert":"\n"}]}

并以某种方式将其转换为等效的HTML，即

hello
<ul>
    <li>this is in a list</li>
</ul>
<b><i>bye!</i></b>

有什么办法可以做到这一点？

谢谢你的帮助。

Answer 1

好的，我知道了。

当在屏幕上时，可以从编辑器中获取HTML。我这样做是使用quill.root.innerHTML。

所以我需要保存两件事：

1. 使用Quill编码的文本，仅由Quill编辑器使用。如果我希望能够将以前保存的笔芯文本加载到笔芯编辑器中，则需要此功能。
2. 提取的HTML（通过quill.root.innerHTML），我可以用它在网页上显示文本。