问题标签 [react-quill]

我遇到了一个有趣的问题。我将 NextJS 用于其服务器端渲染功能，并使用 ReactQuill 作为我的富文本编辑器。为了绕过 ReactQuill 与 DOM 的联系，我动态地导入了它。但是，这带来了另一个问题，即当我尝试将 ref 附加到 ReactQuill 组件时，它被视为可加载组件而不是 ReactQuill 组件。我需要 ref 来自定义上传到富文本编辑器时如何处理图像。现在，ref 返回 current:null 而不是我可以使用 .getEditor() on 自定义图像处理的函数。

有人对我如何解决这个问题有任何想法吗？我尝试了引用转发，但它仍然将引用应用于可加载组件，而不是 React-Quill 组件。这是我的代码的快照。

我需要以单一反应形式添加多个 ReactQuill 实例。此外，对其执行必需的字段验证并存储该单独的值。谁能帮我？

我创建了代码沙盒链接：https ://codesandbox.io/s/stupefied-waterfall-xp1t1

我遇到了一个奇怪的问题。我将 NextJS 用于其服务器端渲染功能，并将 ReactQuill 用作我的富文本编辑器。为了绕过 ReactQuill 与 DOM 的联系，我动态地导入了它。但是，这带来了另一个问题，即当我尝试访问通过锚链接导入 ReactQuill 的组件时不起作用，但我可以通过手动点击路由来访问它。这是我的目录概述，

在我的pages/admin/index.js

在我的pages/admin/crud/blog.js

在我的components/crud/BlogCreate.js

为了import "../../node_modules/react-quill/dist/quill.snow.css"在components/crud/BlogCreate.js我使用中使用@zeit/next-css，这是我的next.config.js

当我点击Create Blog它应该重定向我http://localhost:3000/admin/crud/blog但它只是冻结时出现问题。

但是，如果我手动点击http://localhost:3000/admin/crud/blog，那么它会转到期望页面并完美运行。

一旦我手动加载该页面，然后就Create Blog可以工作了。现在我真的不明白问题出在哪里？因为它没有显示错误，这就是为什么我没有任何术语来描述我的问题，这就是为什么我给出所有令人讨厌的代码和目录，我怀疑是这个错误的原因。

背景：我正在尝试创建一个实时编辑器。这样多个用户可以实时看到更改。作为一名编辑，我正在使用react-quill。对于发送数据，我使用的是socket。

主意：

• 从客户端编辑时会发出更改。
• 套接字服务器将接收更改并为所有连接发出。
• 客户端将收到发出的更改并将其显示在所有编辑器上。

问题： 在编辑器上输入（快速）时，它会自动发出内容。

客户端：

服务器端：

这是一个反应羽毛笔问题还是我做错了？

我想在我的 React Quill 上添加一个字符计数器。目前我有一个 950 的字符限制器。问题是用户必须知道字符数不能超过 950，因此我尝试getLength()在渲染上添加字符计数器但给了我一个错误。这是我的代码：

在渲染：

我正在使用 react quill 编辑器，编辑器工作正常。但是当我显示 html 内容时，它不是编辑器视图中显示的格式。在控制台中，我可以看到 ql-indent 类已应用于标记，但它在外部编辑器中不起作用。我尝试应用 quill core.css 样式，但仍然没有用。

很难找到在编辑器之外显示 quill-editor html 内容的指南。所以请帮助我在编辑器之外处理 ql-xxxx 类。

我在反应项目中有羽毛笔编辑器，并且图像处理程序用于上传图像，但我必须在羽毛笔编辑器中为所有图像元素添加类。这是我的图像处理程序代码

有人可以帮我解决这个问题，因为我已经尝试了很长时间并且没有成功。任何帮助或建议将不胜感激。

我的目标是在工具栏中创建一个按钮，<p>为光标所在的默认标签添加样式。例如：

从<p>Example</p>到<p style="color: white;">Example</p>没有嵌套格式？

现在，我的解决方法是使用一个新的自定义印迹，它做了几乎相同的事情

<p><custom style="color: white;">Example</custom><p>

我从字面上不知道如何做到这一点，因为我是新来的羽毛笔。我花了几天时间研究羽毛笔/羊皮纸文件，但不是 100% 了解它是如何工作的。任何帮助表示赞赏！

我正在使用react-quill，我不知道如何image在插入编辑器后选择一个，以及如何在删除后获取删除url后的图像。

这是我的编辑器组件

那么，如何在插入后在编辑器中选择图像并after从编辑器中删除 url。

还没有找到“moduleAttributes”的实验性语法解决方案，尽管我已经为其他人看到了很多，比如“classProperties”

错误：

组件生成错误：

错误本身是由传递给 import() 调用的 { ssr: false } 选项对象生成的。

关于如何解决这个问题或为什么会发生的任何想法或知识？谢谢！