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

Question

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

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

<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 格式化的普通网页上显示此文本。

例如，如果有人在 Quill 编辑器中输入以下内容：

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 编辑器使用。如果我希望能够将之前保存的 Quill 文本加载到 Quill 编辑器中，我需要这个。
2. 提取的 HTML（通过 quill.root.innerHTML）可用于在网页上显示文本。