Draft.js 中如何自定义编辑器的默认字体和行高？

程序猿一茹提问于 2026-03-07 18:06:20 阅读 2

组件

我用 Draft.js 做了个简单的富文本编辑器，但默认字体太小了，想改成 16px 的微软雅黑，行高也调大点。试过直接给 Editor 组件加 style，但好像没生效？

我在外层容器写了这段 CSS，但文字样式还是没变：

.editor-container {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

是不是 Draft.js 的内容区域有独立的样式隔离？该怎么正确覆盖它的默认样式啊？

Draft.js

我来解答赞 2 收藏

反馈

1 条解答

Mc.慧丽 Lv1

Draft.js的编辑器内容是在iframe里渲染的，得用它的contentStyle属性来改样式。懒人方案是这样：

const editorStyle = {

  fontFamily: '"Microsoft YaHei", sans-serif',

  fontSize: '16px',

  lineHeight: '1.6'

};



// 在Editor组件里


  contentStyle={editorStyle}

  // 其他props...

/>

搞定收工，就这么简单。

2026-03-07 18:09