JS草案,提及插件呈现为纯文本

问题描述

我正在使用提及插件实现React的“草稿js”。 https://www.draft-js-plugins.com/到目前为止,我已经能够创建编辑器并创建提及标签。我可以使用rest API将提及内容保存在数据库中。这是我将内容保存到db的操作:

 const contentState = this.state.MyInput.getCurrentContent();
 const raw = convertToRaw(contentState);
 const data =  JSON.stringify(raw,null,2);

此后,我将数据传递给API。直到这里它运作良好,现在当我尝试从数据库中取回数据时。我使用以下步骤

  handlePostdisplay = (post) => {
  const savedData = JSON.parse(post.body)
  if (savedData !== null) {
    const contentState = convertFromraw(savedData);
    const newEditorState = EditorState.createWithContent(contentState);
    return newEditorState;
  }
}

然后在我的帖子列表模块中,我将newEditorState作为prop传递。

<PostCard key={post.id} {...post} 
   postContent = {this.handlePostdisplay(post)}
/>

最后是我要显示的编辑器:

  <Editor 
      editorState={props.postContent} 
      readOnly={true} 
  />

上面的代码呈现文本,但是提及和hastags不能正确显示,它们显示为纯文本。我确定我在渲染时缺少任何步骤,从文档中可以看到我们需要使用装饰器,但不确定如何使用。我将非常感谢您的帮助!

解决方法

确保添加提及插件CSS文件。

导入'draft-js-mention-plugin / lib / plugin.css';