问题标签 [react-quill]

我react-quill用作富文本编辑器。我需要插入一个已经存在的 HTML 代码，以便它在编辑器中显示为文本。有没有能力做这样的事情？

结果看起来像：

我在我的反应项目中使用 ReactQuill 组件。在我的页面中，我有多个组件，例如（TextBox/InputNumber Box/DropDown），所以从每个组件中我都在调用一个事件

所以这个组件也调用了handleChange事件，这onChange将通过event，从事件中我们可以得到value

所以我想调用相同的handelChange事件但是

TextField 输入的 onChange 接收包含名称和值的事件。另一方面，Quill 组件的 onChange 接收实际内容。

所以我试图写一个单独的事件方法

但是在这样做之后，这行代码有一些问题 this.setState({ ...this.state, postForm: _postForm }); ，如果我要添加它，那么 ReactQuill 编辑器的文本区域将不会显示我正在编写的任何内容。

和 ReactQuill 组件就像

我目前正在创建一个博客仪表板，我是网络开发的初学者。对于编辑器，我使用的是 React quill.. 在文档中有一个关于更改处理程序的教程。但它只是控制台日志“文本更改”，我正在尝试使用我在羽毛笔编辑器上键入的任何内容来更改控制台日志“文本更改”。

我的问题是。怎么做？这是我的代码useEffect：

使用反应羽毛笔。我想添加一个不可编辑的文本块，我可以创建印迹，但是如果我尝试向它添加 contenteditable=false 属性，它就不起作用。我的代码如下

单击按钮插入，创建一个新的嵌入并将其添加到编辑器，但它是可编辑的，我不想要。另一个问题是我想引用新添加的嵌入，稍后也更改它的值，我可以使用 Parment.find() 和稍后使用格式来做到这一点，但我无法弄清楚如何在反应中做到这一点。

我正在使用ReactQuill文本编辑器。当我将编辑器的内容发送到 MongoDB 时，内容的样式会丢失，除了粗体和段落标签。我想知道如何使用样式存储所有数据并以相同的方式返回。我正在使用 editor.getContent() 更新状态 在 此处输入图像描述 我传递给 ReactQuill 的道具在 此处输入图像描述

在此处输入图像描述

我正在使用react-quill 1.3.3。我还允许在帖子中添加图像。quill 现在的工作方式是，它只是将图像转换为字符串并将其全部作为文本发送。问题是这似乎需要大量额外的内存（数据）。例如，对于只有 20K 的图像，我收到 413 错误，“413（有效负载太大）”等。真正的方法是将图像转换为链接并将图像保存到云服务。我已经有用于保存头像图像的云服务，因此可以复制。问题是，我们如何让 react-quill 做到这一点？Quill 似乎是一个将图像转换为文本的一站式商店，所以我们将不得不做一些特殊的编码，我不知道该怎么做。

这是羽毛笔组件：

这是一些类似的工作，但我不知道如何将此代码添加到我的应用程序中。

我所期待的是，我们应该能够使用 quill 工具栏上的“添加图像”按钮，并且所见即所得的工作正常，并且图像是从用户的硬盘驱动器中获取并放置在格式正确的文本中。不同之处在于，当您保存时，图像会发送到您的云存储，并且链接会粘贴到保存的 html 中。当您查看帖子时，该链接会再次扩展为图像。

如果有人知道为什么图像被转换成如此大的尺寸（超过 20MB），请告诉我，因为我也可能只是接受它作为解决方案。

以下是包含 quill 的组件部分的代码：

编辑：我制定了第二个解决方案。在我的 Apollo 服务器代码中，我按照这里的建议添加了 bodyParser 。它现在似乎工作正常。

我将 quill 与 react 一起使用，并为键 13（回车）添加了绑定以发送消息（换行输入换行）。

在 PC 上完美运行，但在移动设备上我不希望它发生。在移动设备中，我想要常规行为（新行），所以如果用户想要发送消息 - 他只需点击“提交”。

我考虑过解析用户代理字符串，或者以某种方式检测虚拟键盘，但我正在寻找更可靠的东西。

有正确的方法吗？

我目前正在制作一个有博客的网站（我正在使用 quill 更准确地react-quilljs），我现在想在博客卡中添加简短描述

这是我从 delta 对象获得的示例数据

我希望有可能进行例如不删减单词并显示少于 50 个单词的描述。如果它可以只呈现没有任何标题属性的文本单词。是否有任何选择来实现它，或者我必须保留我现在使用的东西。

我试图在我的 react-quill 组件中实现将图像上传到服务器的功能，但出现错误：quill.getSelection is not a function

我处理图片上传的函数如下所示：

问题是作为 ref 的 quill 没有获得完整的 api，当我 console.log quill.current 时，只有几个功能。如何获得完整的 API？

当我连接 NEXTJS react-quill 时，quill 不起作用。

屏幕错误

我在我的网站上附加了一根羽毛笔。当我连接 Quill 时，代码是类组件。然后我切换到箭头功能。处理 create.js 文件时出错：

这行不通

当我连接 NEXTJS react-quill 时，quill 不起作用。