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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

Answer 2

我现在也在做同样的事情。对于您的答案：

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

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

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

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

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

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

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