Draft-js保存和检索MySql内容的更好方法

时间:2019-06-28 09:58:05

标签: reactjs draftjs draft-js-plugins

我在一些ReactJS应用程序中使用草稿js和一些插件作为编辑器。

我正在寻找一种在db上存储数据并检索该数据的好方法。

我认为更好的解决方案是以两种不同的格式保存数据:

  • 序列化的原始json,最终将其转换回内容以在草稿中重新编辑
  • 在查询和后视图中使用的另一种格式

在我的帖子中,我有:

  • 提及
  • 标签
  • 链接

现在,我想只存储链接和标记的文本,并在前端使用linkify来呈现href标记,但是我正在寻找一个很好的解决方案。也许是带有提及文字和用户ID的序列化字段?

我正在寻找一种解决方案,该解决方案可以帮助我按内容搜索帖子,并可以通过快速查询来检索很多内容。

这是两行的draft-js json,带有#号和提及(在entityMap中)

{
  "blocks": [
    {
      "key": "19vrn",
      "text": "row 1 with mention and #hashtag",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 11,
          "length": 5,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "46e6h",
      "text": "row 2",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    }
  ],
  "entityMap": {
    "0": {
      "type": "mention",
      "mutability": "SEGMENTED",
      "data": {
        "mention": {
          "name": "mention",
          "id": 53,
          "avatar": "b26be1f0-942b-11e9-bebb-a788574b8d0e.jpg",
          "title": ""
        }
      }
    }
  }
}

1 个答案:

答案 0 :(得分:0)

对于那些正在寻找相同问题的人,这是我如何解决此问题的方法:

  • 我只用文字this.state.editorState.getCurrentContent().getPlainText('')保存postContent
  • 我保存了postRawContent以供以后编辑:convertToRaw(this.state.editorState.getCurrentContent());
  • 我从postRawContent中提取要提及的实体地图
  • 在前端,我循环浏览提及内容,并将@mention替换为带有href的适当html

我希望这可以帮助某人