ProseMirror 中如何自定义选中状态的样式? 宇文博硕 提问于 2026-03-11 00:48:21 阅读 41 交互 我在用 ProseMirror 做一个富文本编辑器,想改一下节点被选中时的高亮背景色,但默认的蓝色太刺眼了。查了文档说可以通过 CSS 覆盖,但我试了没生效,是不是我写错了? 我加了这段样式: .ProseMirror .selected { background-color: #f0f9ff !important; } 但选中文本时还是原来的蓝色,完全没变,是不是类名不对?或者 ProseMirror 用了别的机制? 富文本编辑 我来解答 赞 16 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 欧阳庆芳 Lv1 类名写错了,不是 .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 加载更多 相关推荐 2 回答 56 浏览 ProseMirror表格合并单元格后,如何让相邻单元格保持边框一致? 最近在用ProseMirror实现带边框的表格功能,但发现当调用mergeCell合并单元格后,相邻未合并的单元格边框会断开,看起来像被“吃掉”了一样。我试过在CSS里给td加border-colla... 诸葛雨路 交互 2026-01-27 18:28:29 2 回答 77 浏览 ProseMirror在Vue组件中初始化时内容不显示怎么办? 我在Vue组件里用ProseMirror写富文本编辑器,初始化的时候传了content属性但内容始终不显示出来,这是为什么呢? 代码是这样写的: import { EditorState, Edito... 长孙运来 交互 2026-01-27 08:51:29 2 回答 7 浏览 uni-app 中如何正确使用自定义导航栏并适配状态栏高度? 我在 uni-app 里想用自定义导航栏,但发现不同手机的状态栏高度不一样,顶部经常被遮挡。我试过用 uni.getSystemInfoSync() 获取状态栏高度,但放到页面里还是不对。 这是我的结... ლ若曦 框架 2026-03-20 20:35:18 1 回答 15 浏览 批量操作时如何正确管理选中状态? 我在做列表的批量删除功能,但选中状态总是同步不上,点全选后有些项没反应。 我用的是React的useState来存选中的ID数组,但更新的时候好像有状态滞后的问题。比如下面这段代码: const [s... Zz洛熙 交互 2026-03-16 22:16:21 1 回答 2,128 浏览 Tabs选中状态样式切换时没变化怎么办? 在写Tabs组件时,给选中的标签加了.active类的背景色,但点击切换时样式没变化。我试过用JS动态切换类名,控制台显示类名确实变掉了,但样式就是没跟着变... 我的CSS是这样写的: .tabs_... 欧阳文娟 组件 2026-02-10 20:56:25 2 回答 90 浏览 浏览器通知权限请求后如何自定义提示样式? 在开发网页通知功能时,用户授权后想用自定义样式覆盖浏览器默认的提示框,但发现CSS样式完全不起作用。尝试给notification对象添加类名也不行: Notification.requestPerm... 程序员统思 交互 2026-01-30 15:32:32 1 回答 62 浏览 Material-UI按钮样式覆盖不了自定义的CSS如何解决? 我在用Vue和Material-UI做按钮组件时遇到问题,想给按钮加个悬停效果,但自定义的CSS样式完全没生效... 代码是这样的: 点击我 .custom-btn { background: #4C... IT人凡敬 组件 2026-01-28 11:07:26 1 回答 20 浏览 宜搭自定义页面中如何正确引入外部HTML片段? 我在宜搭的自定义页面里想嵌入一段静态HTML内容,但直接贴进去样式全乱了,而且控制台还报错说某些标签被过滤了。是不是宜搭对HTML有特殊限制? 我试过把下面这段代码放进自定义组件: <div c... UI玉戈 框架 2026-03-20 14:27:21 1 回答 15 浏览 组件树更新后选中状态为啥不刷新? 我在做可视化编辑器的组件树,每次拖拽新组件进来,树结构能正常更新,但之前选中的节点状态没清掉,导致新节点无法被正确选中。我明明已经用 v-model 绑定了当前选中项啊。 试过在数据变更后手动重置 s... 轩辕富水 交互 2026-03-20 01:28:23 1 回答 23 浏览 UIkit组件的自定义样式为啥不生效? 我在用UIkit做项目时,想改一个.uk-card的背景色,但加了自定义CSS就是没反应。是不是UIkit的样式优先级太高了?我试过直接在组件上写style也不行。 这是我的CSS代码: .uk-ca... 爱学习的迁迁 组件 2026-03-14 20:42:21
.selected,是.ProseMirror-selectednode。ProseMirror 给选中节点加的是这个类名,你可以试试:
另外如果你是想改文本选中的高亮颜色(就是鼠标拖蓝那种),那个是浏览器的原生 selection 样式,得用伪元素:
这两个不一样的,节点选中是光标放在某个块上(比如图片、卡片)时显示的背景,文本选中是拖拽选中的文字。看你具体想改哪个。
如果还是没生效,检查一下你的 CSS 文件有没有正确引入,以及选择器优先级够不够。实在不行就加
!important硬刚,先确认样式写对了再说。