Draft.js 中如何正确处理空格和换行符的显示问题？

司徒志欣提问于 2026-03-14 12:38:23 阅读 2

组件

我在用 Draft.js 做一个富文本编辑器，发现用户输入的空格和回车在保存后显示不正常，比如多个空格变成一个，换行直接没了。这该怎么处理？

我试过用 convertToRaw 保存内容，再用 convertFromRaw 还原，但格式还是不对。是不是要自己处理 block 的类型或者 inline style？

const contentState = editorState.getCurrentContent();
const raw = convertToRaw(contentState);
// 保存 raw 到后端
// 之后从后端取回 raw 并还原：
const restoredContent = convertFromRaw(raw);
const newEditorState = EditorState.createWithContent(restoredContent);

Draft.js

我来解答赞 1 收藏

反馈

1 条解答

志选 Lv1

这个问题挺常见的，Draft.js 本身是能正确存储空格和换行的，问题一般出在渲染端。

首先确认一点：你的保存和恢复逻辑是对的，convertToRaw 和 convertFromRaw 没问题。问题在于前端渲染的时候没有保留空白字符。

解决方法很简单，在你的渲染层 CSS 里加这一句：

.DraftEditor-root {

  white-space: pre-wrap;

}

或者更精确一点，针对 editor 的容器：

.public-DraftStyleDefault-block {

  white-space: pre-wrap;

}

如果你用的是自定义的 block render map，那需要在渲染组件里也加这个样式。

另外提醒一下，如果你需要用户输入的多个连续空格（比如缩进），记得检查一下是不是输入法的问题——有些输入法会默认把多个空格合并，这个锅 Draft.js 不背。

如果还有问题的话可以再贴一下你前端渲染部分的代码，我帮你看看具体是哪里没处理好。

2026-03-14 13:03