ProseMirror 中如何自定义选中状态的样式?

宇文博硕 阅读 41

我在用 ProseMirror 做一个富文本编辑器,想改一下节点被选中时的高亮背景色,但默认的蓝色太刺眼了。查了文档说可以通过 CSS 覆盖,但我试了没生效,是不是我写错了?

我加了这段样式:

.ProseMirror .selected {
  background-color: #f0f9ff !important;
}

但选中文本时还是原来的蓝色,完全没变,是不是类名不对?或者 ProseMirror 用了别的机制?

我来解答 赞 16 收藏
二维码
手机扫码查看
1 条解答
欧阳庆芳
类名写错了,不是 .selected,是 .ProseMirror-selectednode

ProseMirror 给选中节点加的是这个类名,你可以试试:

.ProseMirror .ProseMirror-selectednode {
background-color: #f0f9ff !important;
}


另外如果你是想改文本选中的高亮颜色(就是鼠标拖蓝那种),那个是浏览器的原生 selection 样式,得用伪元素:

.ProseMirror ::selection {
background-color: #f0f9ff;
}


这两个不一样的,节点选中是光标放在某个块上(比如图片、卡片)时显示的背景,文本选中是拖拽选中的文字。看你具体想改哪个。

如果还是没生效,检查一下你的 CSS 文件有没有正确引入,以及选择器优先级够不够。实在不行就加 !important 硬刚,先确认样式写对了再说。
点赞 1
2026-03-11 01:01