问题标签 [draft-js-plugins]

我将 Draftjs 与 Draft-js-plugins-editor 一起使用，我正在使用两个插件：draft-js-mathjax-plugin和draft-js-mention-plugin

当用户使用“@”提及元素时，我想稍后用值替换所有提及。例如，“你有@A”将被“你有 300”替换。我找到并使用了Draft-js 构建搜索和替换功能，该功能有很好的文档和解释。我更改了一些函数以使它们更具全局性：

这单独运行良好，但是当我使用 mathjax-plugin 放置数学表达式，然后我使用该Replace函数时，所有数学内容都消失了......

我知道在 replaceText 函数的定义中我们可以插入 inlineStyle，但我没有找到任何“提取”样式的方法。我尝试使用getEntityAt,和其他功能findStyleRanges，findEntityRanges但我无法让它们做我想做的事......

这是我的反应组件：

如果我没有使用替换功能，一切都会按预期显示，以正确的风格提及，以及数学表达式。

如何使编辑器的输入在新行输入时自动向下滚动？就像在https://jpuri.github.io/react-draft-wysiwyg/#/demo的示例 6 中一样。现在滚动停留在顶部，文本光标在低于底部边框时隐藏。

我一直在尝试让草稿 js 提及插件与反应钩子一起使用，但似乎无法弄清楚代码有什么问题。感谢您对此的任何帮助。

问题是当提及列表弹出有滚动时 keydown/keyup 不起作用，我可以使用鼠标滚动但 keyup/keydown 没有使滚动移动到正确的位置

使用 draft.js，您如何添加带有元数据的自定义链接实体？我所做的示例：对于我的编辑器菜单按钮之一，我添加了一个单击处理程序，该处理程序创建了一个名为“META_WRAPPER”的实体：

我添加了一个装饰器策略和组件来处理由上述 handleMetaWrapperBtnClick 添加的自定义“META_WRAPPER”实体：

找到'META_WRAPPER'的策略-

为 metaWrapperStrategy 找到的自定义 META_WRAPPER 渲染的装饰器组件：

奇怪的是，上面的内容仅在本地工作，并且仅在我放置断点并逐步执行代码时才有效：

1. 调用 handleMetaWrapperBtnClick 处理程序，这将导致使用新的自定义实体更新编辑器状态，
2. MetaWrapperStrategy 运行
3. MetaWrapper 组件作为结果呈现
4. 成功 - 选择被编辑器内的自定义 MwSpan 或 MwLink 替换。（MwSpan 或 MwLink 之一将根据 elementType 元字段的值呈现）

但是，在没有断点的情况下运行代码时，编辑器中的选择不会发生任何变化。

此外，当它工作时，不可能将粗体文本等内联样式添加到同一选择中。

我还创建了这个 CodeSanbox 来演示这个问题：https ://codesandbox.io/s/dry-river-qlysv?file=/src/Components/DraftEditor.js

尝试用纯Draft.js 实现类似的东西：

更准确地说，我希望通过单击三点图标来编辑和扩展这些隐藏的原始消息块

所以，经过一番研究，我发现有自定义块渲染和自定义块组件，所以我试图用 OriginalMessage 组件扩展 blockRenderMap：

所以，这些可能是工作代码，想法是 - 我需要将以下 HTML 解析为相应且可识别的块：

我用来html-to-draftjs将这个 html 解析成块：

但是当我检查假设有original类型的块时，类型是unstyled.

问题是 - 如何让编辑器将<original>标签识别为需要自定义呈现的块？

顺便说一句，不确定这是解决问题的正确方法 - 任何帮助或建议表示赞赏。谢谢！

所以我将 DraftJS 包与 React 以及提及插件一起使用。创建帖子后，我将原始 JS 存储在我的 PostreSQL JSONField 中：

当我编辑帖子时，我将编辑器状态设置如下：

文本设置正确，但没有突出显示任何提及，我无法添加新提及。有谁知道如何解决这一问题？

我正在使用提及插件：https ://www.draft-js-plugins.com/plugin/mention

我在 TextArea 中使用 Draft-js-plugin-editor。当我开始输入时，光标会跳到左边直到 2 个字符之后。例如，当输入“信息”时，这将输入为“formationnI”。它的类型为 I，然后是 n（从右到左），然后是从左到右的形成。我在网上尝试了一些建议，但还没有解决。代码在下面。请问有什么想法吗？

我尝试了多种不同的方法来尝试在 Draft-js 中附加图像。

我的尝试遵循教程https://www.draft-js-plugins.com/plugin/image中的示例。对于“添加图像按钮示例”，可以在此处找到完整的源代码https://github.com/draft-js-plugins/draft-js-plugins/tree/master/docs/client/components/pages/图像/添加图像编辑器。我也尝试关注这篇不使用图像插件做类似事情的中篇文章https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-react-and-draft- js-part-2-4-persisting-data-to-server-cd68e81c820。

如果我使用已嵌入的图像设置初始状态，它会呈现。但是，当使用稍后添加它的机制时，它似乎不起作用。我读过一些关于各种版本的 plugins / draft.js 有问题的提及。
我的版本：

“draft-js-image-plugin”：“^2.0.7”，“draft-js”：“^0.11.6”，

我们正在使用 DraftJS 创建具有用户提及（draft-js-mention-plugin）和主题标签（draft-js-hashtag-plugin）功能的富文本帖子/评论。以下是代码示例。

这在桌面网络浏览器中运行良好。现在我们也在尝试支持移动平台。我们在android chrome中面临以下两个问题：

1. 每当我在一个单词后输入空格时，键盘就会关闭。

2. 清除提及或标签会完全破坏我们的应用程序并出现以下错误

   Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

   上述错误发生在您的一个 React 组件中：

任何帮助或指导表示赞赏。使用 android chrome 和 google 键盘对其进行了测试。