ly_ueditor_plus 粘贴换行丢失修复总结报告
ly_ueditor_plus 粘贴换行丢失修复总结报告
一、问题现象
从网页复制的代码块(
<pre>/<pre><code>/<span class="token …">高亮结构)从终端 / 纯文本文件复制的多行命令脚本(
#注释、\续行、空行)
二、根因分析(三层叠加,缺一不可)
pastebin innerHTML → UE.filterWord → 换行转换(本次新增) → UE.htmlparser → filterInputRule → insertHtml
根因 1:UE.filterWord 折叠全量换行
触发条件:内容匹配 Word 特征(
class="?Mso/mso-样式 /w:WordDocument/lang=等),带lang=属性的网页很常见;原代码无任何
<pre>保护,代码块换行被无差别压平。
根因 2:纯文本粘贴的 \n 无换行渲染
根因 3:UE.htmlparser 剥除标签相邻换行(最终真凶)
[\r\t\n ]*</?(\w+)…>[ \t\r\n]*
三、修复方案(ueditor-plus/ueditor.all.js 粘贴插件,共 4 处)
修复 A:filterWord 保护 <pre> 块
function t(t){var a=[];
return t=t.replace(/<pre[\s\S]*?<\/pre>/gi,function(e){
return a.push(e),"\u0000UEPRE"+(a.length-1)+"\u0000"
}), t.replace(/[\t\r\n]+/g," ") /* …原 Word 清理链… */
.replace(/\u0000UEPRE(\d+)\u0000/g,function(e,i){return a[i]});
}
修复 B:粘贴时读取剪贴板 text/plain 回退恢复
// 事件监听处
i(e, t.clipboardData && t.clipboardData.getData ? t.clipboardData.getData("text/plain") : "")
// i(e,p) 内:恢复逻辑(实体解码、空白不敏感匹配、$1/$& 替换符用函数回调防吞)
修复 C:<pre> 内 \n 直接转为 <br/>(关键)
i = i.replace(/\r\n?/g,"\n")
.replace(/<pre[\s\S]*?<\/pre>/gi, function(e){ return e.replace(/\n/g,"<br/>"); }) // pre 内 \n→<br/>
.replace(/<[^>]*>/g, function(e){ return e.replace(/\n/g,"\u0002"); }) // 标签内换行安全清理
.replace(/([^<>\u0001\u0002])(\n+)(?=[^<>\u0001\u0002])/g, /*文本内换行→等量<br/>*/)
.replace(/\n/g,"").replace(/\u0002/g,""); // 标签间残留清理
修复 D:纯文本(无 pre)换行 → <br/>
四、验证结果
| 检查项 | 结果 |
|---|---|
node --check ueditor.all.js 语法 | ✅ 通过 |
真实场景:pre>code>span 逐行代码块(每行 </span>\n)→ 每行 <br/>,缩进 保留,span 结构保留 | ✅ |
| 来源网页无换行 + 纯文本回退 → 19 行全部恢复 | ✅ |
| 正常 pre(换行充足)→ 恢复逻辑跳过、不重复处理 | ✅ |
| pre 与纯文本不匹配 / 无 pre / 单行 → 原样不动 | ✅ |
代码含 $1 $& && → 不被替换符吞掉 | ✅ |
纯文本多行 → 逐行 <br/>,空行 → 双 <br/> | ✅ |
段落间 </p>\n<p> → 不产生多余 <br> | ✅ |
| Word 样式 + pre(修复 A)回归 | ✅ |
五、部署与缓存
| 文件 | 改动 |
|---|---|
ueditor-plus/ueditor.all.js | 修复 A/B/C/D |
ly_ueditor_plus_core.php | 加载版本号 ?0309 → ?0313(破浏览器缓存) |
六、文件变更清单
ueditor-plus/ueditor.all.js 粘贴插件修复(4处)+filterWord pre 保护
ly_ueditor_plus_core.php 版本号 ?0309→?0313
paste_diagnose.html 诊断页(捕获剪贴板双格式+管线分步)
test_paste_pipeline.js Node 全链路仿真测试(13 用例)目录 返回
首页