如何将富文本编辑器数据保存到 DRF - postgresql 数据库并在 React 中显示

我想使用 Django 后端和 React 前端开发一个博客应用程序。我将使用PostgreSQL。 我想使用富文本编辑器，例如Quill https://quilljs.com/撰写博客文章。我的问题：

1. 我听说用文本编辑器编写的文章需要先转换为 HTML，然后才能保存到数据库中。如果是这样，我该如何在 Django Rest Framework 中执行此操作？
2. 如何在前端呈现数据库中保持相同样式和格式的文章？
3. 比如说，我在文章中包含了多张照片。如何保存数据库中的所有照片？即架构应该是什么？

在我投入之前，我想先弄清楚我的疑虑。

我已经很久没有发布这个问题了。之后，我获得了足够的工作知识，可以使 Quill.js（我正在使用的富文本编辑器）与 React.JS 一起使用，或者在我的例子中与 Next.JS 一起使用。因此，本文仅关注 Quill.js。 Quill npm 包更具体地针对 ReactJS 是反应鹅毛笔 https://github.com/zenoamaro/react-quill。我尽可能地对初学者友好地介绍它。

1. Quill 提供了一个内置函数：editor.getHTML(). editor是当前编辑器实例，在其中键入内容。该方法生成innerHtml在编辑器中准备的内容的一部分。

保存到数据库很简单POST它到你的后端。但你必须sanitize这个innerHtml在传递到数据库之前。不能说服务器端，但我必须在客户端进行清理。一个好的包是DOM纯化 https://github.com/cure53/DOMPurify。如果您想以与在浏览器中键入的方式相同的方式显示它，则需要将其保存到数据库中。

2. 第一点也提供了我的第二个问题的解决方案。但重要的一点是：在 Quill 编辑器中编写的内容也可以作为类似 JSON 的格式使用，称为鹅毛笔三角洲。您可以使用该函数获取增量editor.getContents()。你需要POST如果您想稍后编辑内容，请将其添加到数据库中。

To edit, you need to get this delta from the database and then initialize Quill editor with this delta in the value attribute. For example, the text in orange is the delta representation of the text in the editor: codepen source https://codepen.io/k3no/pen/amwpqk.

还有一个功能editor.getText()它从编辑器中提取所有文本。

3. Photos。一般来说，在 Quill 中，您只需将照片放入编辑器中，Quill 就会为照片生成一个 Base64 编码的增量。就是这么简单。您无需担心单独的图像字段。