编辑从 Word 粘过来三段文字,发布后行距忽大忽小,源码里每个 p 都带着 class=MsoNormal 和 mso-line-height-rule。乍看像缓存或者权限的锅,追下去往往不是。
editor.addEventListener('paste', e => {
const text = e.clipboardData.getData('text/plain');
e.preventDefault();
document.execCommand('insertText', false, text);
});
追下去是这么回事:Word 复制时会把自身的样式表一起写进剪贴板,浏览器按 HTML 原样插入。编辑器只做了标签白名单,class 和内联样式被放行,站点的行高规则就被覆盖。
碰到「Word 粘贴样式」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
具体做法是,粘贴时读 text/html 和 text/plain 两份数据,优先取纯文本再按段落重建;需要保留加粗和列表时用白名单清洗,把 mso- 开头的样式和 class 全部剥掉;清洗完让编辑器重算一次高度,避免残留样式撑开行距。
验收就看一点,再从 Word 粘一段,源码里没有 mso 字样,前台行距与站点正文一致。
