如何在编辑器外将 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.

做到了这一点

所以我需要保存两件事：

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

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

How to format Quill text as HTML outside of the editor?

quill