无法使用 Draft.js 在 React 功能组件中显示 link 实体

Question

我想显示在使用 Draft.js 创建的富文本编辑器中创建的描述。正在将描述保存到 mongoDB。当从数据库中检索到描述时，所有内容都会正确显示，即使是带有样式的内容（例如 h1、h2），但在初始描述文本中创建的 link 不会显示为 links，它们显示为简单文本（跨度元素）。

目前，我使用 convertToRaw 实用程序成功地将 editorState 存储在数据库中，并且为了显示它，我正在使用官方文档中所述的 convertFromRaw 实用程序。

我认为最好显示我正在存储的 JSON 以及当我想显示描述时我如何在组件中启动状态。在这个例子中，我只是存储一个 link 和指向 google.

的文本 "link"

JSON:

{"blocks":[{"key":"3echq","text":"link","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":4,"key":0}],"data":{}}],"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"url":"http://google.com"}}}}

这就是我在编辑器组件中实例化状态的方式（如果正在显示描述，我只是将 "readonly" 属性添加到编辑器）：

const [editorState, setEditorState] = useState(
    hasDescription
      ? EditorState.createWithContent(eventDescription)
      : EditorState.createEmpty()
  );

我从数据库收到与我存储的完全相同的 JSON，但未显示 link 实体，标记将仅显示 span 元素而不显示锚元素应该包裹起来。

Answer 1

您需要使用 DraftJS decorator。此外，DraftJS 在其存储库

中有一个 example

这里是您在 Codesanbox 上的案例的简单示例：https://codesandbox.io/s/link-filks?fontsize=14

无法使用 Draft.js 在 React 功能组件中显示 link 实体

Unable to display link entity in react functional component using Draft.js

reactjs

draftjs