问题标签 [react-quill]

我正在使用React.js& Node.js( express& mongoose) & react-quill库来编辑我的内容的博客项目。

现在我正在将 react-quill 中的内容作为字符串 HTML 保存到我的反应状态。

在将 HTML 作为字符串存储到我的状态后，我向POST我的快速应用程序发送请求，以将此字符串存储在我的 MongoDB 数据库中。

问题是，当我再次尝试在我的反应应用程序中获取此 HTML 时（在其中一个博客文章页面内），内容非常大（现在有 3 篇文章是 1MB）。

响应大小的图像：

响应结构图：

我的问题是如何保持数据的重量更轻？

谢谢你。

编辑：我没有提到我也在使用 react-quill 工具栏上传图片（也许这就是问题所在）

我们正在尝试使用富文本编辑器构建内容平台。我们决定使用羽毛笔编辑器来添加内容。在检查将编辑器输出存储在数据库中的方法时，发现了这条评论。

因此，任何在生产应用程序中集成了 quill 或任何其他富文本编辑器的人都可以提出最好的方法来存储内容并将其与自定义样式一起呈现在 Web 和移动平台上。提前致谢。

我正在尝试使用 react quill 为我的应用程序构建一个文本编辑器。我的要求是构建一个句子模板，在该模板中，会有一些 HTML 控件，如一些自由文本和一些下拉选项。是否可以使用 Quill 构建这样的编辑器。基本上，我想要文本编辑器区域中的工具栏，而不是工具栏。

例如：

1. 模板 1 - 我有{select option}兄弟
2. 模板 2 - 我的名字是{输入框}

在第一个模板中，数字是可选项目，在第二个示例中，名称是自由文本。这些项目有一些验证。需要单独覆盖。

是否可以使用 Quill 编辑器来满足这个要求？

我试图能够在 react-quill 中编辑原始 HTML，所以我在这里所做的是我在 react quill 下方放置了一个 textarea，它确实显示了原始 HTML。当我更改 react-quill 中的内容时，它也反映了带有原始 HTML 的 textarea 中的更改。事情是当我试图在 textarea 中编辑 HTML 时，它没有显示任何错误，并且 textarea 变成了空白。我不知道我是否在这里遗漏了一些东西，我非常感谢任何帮助，并提前非常感谢。这是代码：

尝试使用各种不同的库，例如quill-better-table，但力求获得工作表解决方案。

错误：

我使用以下方法安装了 quill-image-resize：

由于我使用的是 react，因此没有 tsconfig 文件，因此我无法遵循互联网上可用的解决方案。

我的代码：

这是我将鼠标悬停在导入语句上时得到的

我尝试使用该require语句，但错误仍然相同。

这些是我的依赖项：

我对 quill-image-resize-module-react 进行了同样的尝试，但我无法解决错误。我的 reactquill 编辑器在此之前工作过。我没有使用 webpack，所以我什至没有 webpack.config.js 来尝试解决问题。我没有对 node_modules/quill-image-resize-module 中的原始文件进行任何更改。

这是我第一次尝试做出反应，因此希望能得到一些帮助。我非常确定这是我眼皮底下我看不见的东西。感谢您的时间。

我react-quill只使用在客户端动态导入ssr: false. 我的功能组件工作正常，我想将quill-blot-formatter包添加到modules我的羽毛笔组件的一部分。

我的第一个障碍是，我无法注册它quill-blot-formatter，Quill因为它显示：

这个页面是客户端渲染的，所以我不明白这个错误来自哪里！

这是我的代码：

在这里，我不明白如何Quill摆脱react-quill它是动态导入的。因此，我认为这Quill.register是行不通的。现在，我如何quill-blot-formatter注册react-quill？在使用 react-quill 的 Next.js 示例之后，我什至没有ReactQuill像包中的默认导出那样导入 react-quill。

然后我blotFormatter像这样声明了模块。

并在这样的render()方法中使用：

到目前为止，这个QuillNoSSRWrapper子组件做得很好，但是，我该如何使用quill-blot-formatter它formats呢？

我正在使用渲染器来改变关卡的缩进，但是我需要提供一个自定义函数来识别正确的标签。

这是从 API 返回的有效负载 >>>>

我制作了一个已注册的功能组件，quill-blot-formatter并将react-quill其添加blotFormatter到模块列表中。next/dynamic然后我在我想要的页面上导入了这个模块。

自定义函数：

我这样调用默认ReactQuill导出react-quill：

在 Nextjs 页面组件上，我这样称呼它：

现在，问题是，在页面加载后，loading... 声明的道具const QuillNoSSRWrapper显示在屏幕上并永远停留在那里。羽毛笔编辑器不出现。

我尝试评论这一行：Quill.register("modules/blotFormatter", BlotFormatter); 在自定义模块上，然后出现羽毛笔编辑器。blotFormatter模块没有在 Quill 上注册吗？那我怎么注册呢？

我将ReactQuill默认导出与它的道具包装在一个功能组件QuillCustom.js中。这是组件：

我在页面组件中动态导入QuillCustom组件并将道具传递给新QuillNoSSRWrapper组件，如下所示：

现在，问题是，当我写一个字符时，文本编辑器失去了焦点！我试过了，useRef但没有用。这只是同样的事情，失去了焦点。

我搜索了几个小时，发现这是因为QuillCustom.js每次我输入内容时包装器组件都会重新呈现。如何防止这种重新渲染？