如何用html替换DraftJS编辑器中存在的某些文本/块？

Question

我正在使用DraftJS编辑器在我的应用程序的基于React的网页中使用Rich Text功能。

我有以下要求：

当用户键入＃键时，除了编辑器之外还会显示一个下拉列表，用户可以从中选择一个选项。 根据他的选择，我想用一些HTML代替＃，例如图像。

我已经创建了逻辑，用于在用户在编辑器中的＃字符中键入时显示下拉列表，但不知道如何用其他HTML /文本替换该哈希字符。

我已经谷歌搜索了如何做到这一点，但到目前为止还无法找到，就此就是一个如此精确的例子。

有人可以通过一些例子来指导吗？

注意：我知道有一些DraftJS插件提供了一些功能，但我不想使用它们，而只是想继续使用我自己的逻辑，使用上面提到的内容替换。< / p>

Answer 1

Draftjs的replaceText的{​​{1}}静态方法应该可以满足您的需求：https://draftjs.org/docs/api-reference-modifier#replacetext

  

replaceText

     

replaceText（contentState：ContentState，rangeToReplace：   SelectionState，文本：字符串，inlineStyle？：DraftInlineStyle，
  entityKey ?:？string）：ContentState

     

使用提供的内容替换此ContentState的指定范围   字符串，将内联样式和实体键应用于整个字符串   插入的字符串。

     

示例：在Facebook上，当用提及替换@abraham lincoln时   亚伯拉罕·林肯（Abraham Lincoln）的目标是替换整个旧系列，   提及实体应应用于插入的字符串。

如果要直接添加HTML字符串，则无法在编辑器上进行添加，必须结合使用draftjs实体和blockRendererFn来呈现作为HTML / reactjs组件创建的draftjs实体。