在mongodb中使用reactjs、nodejs从富文本编辑器存储数据（包括图像）

Question

我正在制作一个博客网站，希望允许用户在文本之间插入图像并按照自己的方式设置数据样式。我能够设置 Quill 富文本编辑器，但无法获取所有数据（包括图像数据）并将其存储在 MongoDB Atlas 数据库中。我也想稍后展示它，那么我如何存储数据，然后检索它以将其显示在我的 ReactJS 页面中。

我尝试将数据存储在一个状态中，然后将其存储在 MongoDB 中，但由于它都是 HTML 的形式，当我稍后需要将文本和图像分开显示时，这是没有用的。

Answer 1

通常有2种方式存储图像

1. 将实际图像作为物理文件存储在服务器中
2. 将图像存储为base64并在数据库中存储为文本

对于#2，鹅毛笔编辑器允许您获取富文本编辑器的内容。

调用 quill.getContents() 获取图像的详细信息。 您的图像可以从网站复制，该网站将作为超链接或计算机中的文件嵌入，然后它将被编码为 base64

羽毛笔获取内容

Answer 2

您必须使用

handlers

来拦截图像插入例程并单独存储/上传图像。然后执行一些替换魔法来更新内容以包含正确的 URL。

var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', imageHandler); 

...

imageHandler = (image, callback) => {
  // Upload image
  ...
  const img = '<img src="uploadedImageUrl" height="50"/>';
  quill.clipboard.dangerouslyPasteHTML(quill.getSelection().index, img);
}