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

【问题标题】：How do I save rich text editor data to DRF - postgresql database and display in React如何将富文本编辑器数据保存到 DRF - postgresql 数据库并在 React 中显示
【发布时间】：2020-12-02 12:20:24
【问题描述】：

我想用 Django 后端和 React 前端开发一个博客应用程序。我将使用 Postgresql。我想使用像 Quill 这样的富文本编辑器来编写博客文章。我的问题：

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

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

【问题讨论】：

标签： reactjs postgresql django-rest-framework quill

【解决方案1】：

我已经很久没有发布这个问题了。在那之后，我获得了足够的工作知识，可以使 Quill.js（我正在使用的富文本编辑器）与 React.JS 一起工作，或者在我的例子中是 Next.JS。所以，这里只关注 Quill.js。更特定于 ReactJS 的 Quill npm 包是 react-quill。我尽可能以初学者友好的方式呈现它。

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

要将其保存到数据库，只需 POST 将其保存到您的后端。但是在将其传递给数据库之前，您必须清理这个 innerHtml。不能说服务器端，但我必须在客户端进行清理。一个好的包是DOMPurify。如果您想以与在浏览器中输入相同的方式显示它，则需要将其保存到数据库中。

第一点也为我的第二个问题提供了解决方案。但有一点很重要：在 Quill 编辑器中编写的内容也可以以类似于 JSON 的格式提供，称为 quill-delta。您可以使用函数editor.getContents() 获取增量。如果您想稍后编辑内容，则需要将其POST 发送到数据库。

要进行编辑，您需要从数据库中获取此增量，然后在 value 属性中使用此增量初始化 Quill 编辑器。例如，橙色文本是编辑器中文本的增量表示： codepen source.

还有另一个函数editor.getText() 可以从编辑器中提取所有文本。

照片。通常在 Quill 中，您只需将照片放入编辑器中，Quill 就会为照片生成 base64 编码的增量。这很容易。您无需担心单独的图像字段。

【讨论】：

【解决方案2】：

我现在也在做同样的事情。为您解答：

在 DRF 中，发布数据的最简单方法是在模型中使用 Textfield。富文本字段（带有标签）将存储在 Postgres 中。在 Admin 页面或 DRF API 中，您会看到类似这样的内容

然后，要将其重新渲染到前端，您可以使用任何 HTML Parser 库。例如，我正在使用“react-html-parser”，它只是将富文本转换为定义的样式。

至于图像，这有点棘手，我自己还没有完成这部分，但我现在能想到的是你会创建另一个模型和端点来存储图像。将发布请求发送到 django 时，您会将基本文件路径/url 从前端转换为后端。示例：

原文> http://localhost:3000/image/efewf23r.jpg

新的（django）> http://localhost:8000/media/img/img_model/efewf23r.jpg

然后对图像本身进行第二次发布请求，并确保 django 会按照我们上面设置的内容重命名文件。

如果您找到更好的解决方案，请告诉我。

【讨论】：

感谢您的回复。由于这对初学者很重要，因此我将其发布为答案。