首页 > 解决方案 > 您如何从原始 DraftJS 数据中获取内容长度?

问题描述

我将 DraftJS 编辑器的内容作为 JSON 字符串存储在我的数据库中,然后通过convertToRaw(editorState.getCurrentContent()).

存储在数据库中的示例:

{"blocks": [{"key": "1m9md", "data": {}, "text": "", "type": "unstyled", "depth": 0, "entityRanges": [], "inlineStyleRanges": []}, {"key": "c8gek", "data": {}, "text": "Lorem ipsum dolor sit amet, eu habitasse magna aliquam non et faucibus, aliquet et ante tempus vestibulum pellentesque, ligula curabitur. Eum torquent dapibus est, ac consectetuer integer. Luctus pellentesque ut pellentesque. Libero id lorem bibendum, sed elementum, adipiscing mollis, aenean pellentesque ligula nonummy pellentesque ornare urna, sit a sagittis wisi rhoncus tellus congue. Risus tristique blandit in nascetur, mauris quisque sed erat error integer accumsan, ante facilisi. Libero proin nunc vestibulum tempus, consectetuer aliquam sed velit morbi quis, molestie accumsan in, lacus eu, aliquam odio porta tellus ac. Praesent aliquet.", "type": "unstyled", "depth": 0, "entityRanges": [], "inlineStyleRanges": []}, {"key": "7mv98", "data": {}, "text": "", "type": "unstyled", "depth": 0, "entityRanges": [], "inlineStyleRanges": []}, {"key": "63ck4", "data": {}, "text": "", "type": "unstyled", "depth": 0, "entityRanges": [], "inlineStyleRanges": []}], "entityMap": {}}

现在,当将其作为 HTML 显示给用户时,我想检查他们是否为每个部分实际在 DraftJS 编辑器中输入了任何文本。即使他们将其留空,数据库也会存储:

{"blocks": [{"key": "6n2bu", "data": {}, "text": "", "type": "unstyled", "depth": 0, "entityRanges": [], "inlineStyleRanges": []}], "entityMap": {}}

似乎没有明确的方法来以编程方式检查内容的长度(或者它根本存在)。

我正在寻找一种在将内容转换为 HTML 并使用 React 呈现之前检查内容是否存在的方法。

标签: javascriptreactjsdraftjs

解决方案


您可以使用ContentState.hasText()

以查看是否为空。

否则,您始终可以调用ContentState.getPlainText()以获取全文,然后您可以获得长度。

例如myContent.getPlainText(' ').length


推荐阅读