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？

1 个答案: