← 开发日志

Decap CMS 富文本与原始模式的双层画布排错

问题 慢慢写(本站)

后台换肤后正文区域「一会白一会透明」:富文本(cms-editor-visual)和原始 Markdown(cms-editor-raw)是两套 DOM,各藏一层白底。

现象

深色模式下正文编辑区时白时黑,同一条 CSS 规则时灵时不灵。

排查过程

  1. 亮度扫描(遍历元素算背景色)找到白色区块;
  2. 发现 cms-editor-visual(富文本)与 cms-editor-raw(源码)切换的是两棵不同的 DOM 树——只覆盖其中一棵,切模式后就「复发」;
  3. 原始模式还有一层「透明 textarea + 无类名 token span」高亮层,token 颜色来自 Decap 的浅色主题,深色底上不可读。

解决

两棵树都加规则;token 层按容器整体接管为墨色(放弃语法多色,换取双主题可读)。sticky 工具栏透明透字的问题用 html body 前缀提高特异性解决——Decap 的 emotion 规则带元素名(div.css-xxx,0,1,1),注入顺序还靠后。

← 返回开发日志