如何解决如何将富文本编辑器数据保存到DRF-Postgresql数据库并在React中显示
我想用Django后端和React前端开发一个博客应用程序。我将使用 Postgresql 。 我想使用 Quill 之类的富文本编辑器来撰写博客文章。我的问题：
- 我听说用文本编辑器编写的文章在保存到数据库之前需要转换为HTML。如果是这样，我该如何在Django Rest Framework中做到这一点？
- 如何显示数据库中前端保持相同样式和格式的文章？
- 说，我在文章中包括多张照片。如何将所有照片保存在数据库中？即架构应该是什么？
我想在进入之前消除疑虑。
解决方法
我现在也在做同样的事情。为您解答：
在 DRF 中，发布数据的最简单方法是在模型中使用 Textfield。富文本字段（带标签）将存储在 Postgres 中。在管理页面或 DRF API 中，您会看到类似这样的内容
然后，要将其重新渲染到前端，您可以使用任何 HTML 解析器库。例如，我正在使用“react-html-parser”，它只是将富文本转换为定义的样式。
至于图像，这有点棘手，我自己还没有完成这部分，但我现在能想到的是您将创建另一个模型和端点来存储图像。 将 post 请求发送到 django 时，您会将基本文件路径/url 从前端转换为后端。示例：
原创 > http://localhost:3000/image/efewf23r.jpg
新（django）> http://localhost:8000/media/img/img_model/efewf23r.jpg
然后对图像本身进行第二次发布请求，并确保 django 会根据我们上面设置的内容重命名文件。
如果您找到更好的解决方案，请告诉我。
,我已经很久没有发布这个问题了。在那之后，我获得了足够的工作知识，可以让 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 编码的增量。就这么简单。您无需担心单独的图像字段。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。