文章目录复制粘贴保真攻坚鸿蒙编辑器剪贴板的三个坑、五段代码一、问题定义剪贴板是双向断供的二、先讲方法这次攻坚用到的四个定位手段三、坑一粘贴格式全丢——分流器与转换器分析定位修复代码转换器的核心——表格网格展开验证结果四、坑二ArkWeb 里剪贴板时隐时现分析定位转折自己的结论被自己推翻验证结果五、坑三复制 bbb粘出 **bbb**bbb分析定位修复代码给剪贴板开一条专线验证结果六、补一刀渲染态复制丢 #七、验证体系与最终行为八、能力边界表九、心得收尾复制粘贴保真攻坚鸿蒙编辑器剪贴板的三个坑、五段代码摘要本文复盘鸿蒙编辑器 MarkPin 在剪贴板保真上的三次攻坚。问题本质是 ArkWeb 混合运行时下剪贴板跨 Web/原生边界双向断供粘贴方向 CodeMirror 6 默认丢弃 HTML 结构复制方向渲染态选区不含隐藏语法符号。三个坑逐一拆解——① 粘贴格式全丢用六分支分流器 白名单 HTML→Markdown 转换器含表格网格展开、TSV 兜底解决② ArkWeb 剪贴板时隐时现结论随版本漂移最终以 web 直读 原生 probe 双通道并存兜底③ 复制bbb粘出**bbb**bbb根因是系统为 HTML 记录派生纯文本造成混染改用自定义 MIME 专线零污染保真。全文贯穿纯函数 用例先行、装机 CDP 取证、写侧读侧同抓、合成事件不作数四板斧最终 302 用例全绿真机 30 条清单待跑。我认为复制粘贴格式丢失是块硬骨头讲用这一整篇来讲解解决方案按技术复盘的讲法来每个问题按「现象 → 分析定位 → 修复代码 → 验证结果」走一遍代码全部取自 MarkPin 真实源码可对照。一、问题定义剪贴板是双向断供的现象很朴素从网页/WPS 复制内容粘进 MarkPin表格变纯文本、加粗变星号反过来在所见即所得的渲染态里复制标题拿到的文字丢了#号。把链路拆开这是两个独立问题粘贴方向编辑器内核 CodeMirror 6 的粘贴默认只取text/plain网页带来的 HTML 结构在入口处就被丢弃复制方向所见即所得的实现方式是源码一直在、语法符号视觉上隐藏渲染态选中的是格式内容区sliceDoc切出来的本来就是没有标记的片段。两个方向共享同一组底层约束鸿蒙应用内是 ArkWeb 混合运行时Web 内核跑编辑器、ArkTS 原生层管文件与系统服务剪贴板要跨这层边界。后面三个坑全部出在这条边界上。二、先讲方法这次攻坚用到的四个定位手段比结论更值得分享的是怎么定位的。四板斧纯函数 用例先行。转换器设计成纯函数HTML 进、Markdown 出不碰编辑器状态先写 jsdom 用例再实现。后来每次返工这套用例都是护栏装机 CDP 取证。Chrome 里正常、真机ArkWeb异常的问题是这个项目的常态。做法是真机开启 Web 调试端口CDP 直连在真 ArkWeb 里下断言、抓行为而不是靠猜写侧读侧同抓。剪贴板问题必须两端同时布点复制时写入了什么记录、粘贴时读到了什么视图对不上号的差值才是真相合成事件不作为结论依据。自动化注入的假按键事件CDP 合成 paste/copy行为不稳定同一份代码一次成功一次失败。教训固化成规则剪贴板类问题只有真实键盘复测才能定案——这条规则下面救过我们两次。三、坑一粘贴格式全丢——分流器与转换器分析定位第一个结论很快拿到CM6 的粘贴拦截有两条通道最初挂在inputHandler上的拦截在 doPaste 路径根本不经过实测不触发必须用 DOM 事件层domEventHandlers({paste})。这是通道级错误改挂载点就解决。但分流设计才是核心一次粘贴进来可能是外部富文本网页/WPS可能是应用内复制的内容可能是 Excel 的 TSV 纯文本也可能用户只想要纯文本。最终落成六分支优先级链按保真语义 结构转换 兜底排序// editor-build/src/edit/pasteIntercept.ts节选注释从简exportfunctionpasteHtmlExtension():Extension{returnEditorView.domEventHandlers({paste:(event:ClipboardEvent,view:EditorView):boolean{consttext:stringevent.clipboardData?.getData(text/plain)??;consthtml:stringevent.clipboardData?.getData(text/html)??;// ① Ctrl/CmdShiftV纯文本兜底if((mod.ctrlKey||mod.metaKey)mod.shiftKey){returndispatchPasteInsert(view,event,text,false,[]);}// ② 应用内来源标记 !--markpin--直插源码原文零转换零损失// indexOf 而非 startsWithChromium 会注入 meta charset 前缀constmarkIdx:numberhtml.indexOf(RICH_COPY_MARK);if(markIdx0text.length0){returndispatchPasteInsert(view,event,text,true,[],true);}// ③ 外部富文本白名单 HTML → Markdownletresulthtml.length0?convertHtmlToMarkdown(html):null;// ④ TSV 兜底Excel/WPS 复制区域无 text/html 的场景if(resultnulltext.length0){consttsvconvertTsvToMarkdown(text);if(tsv!null)result{markdown:tsv,hasStructure:true,images:[]};}if(result!null){returndispatchPasteInsert(view,event,result.markdown,true,result.images);}// ⑤ web 层读不到剪贴板见坑二preventDefault 后请原生层读event.preventDefault();bridge.onFileCommand(pasteHtmlProbe,JSON.stringify({plainLen:text.length}));setTimeout((){fallbackPlainInsert(view);},NATIVE_PROBE_TIMEOUT);// 600msreturntrue;}});}修复代码转换器的核心——表格网格展开转换器是白名单制认得的标签转换不认识的递归下钻取文字script/style这类噪声直接剔除。行内五件套和标题列表都是直来直去真正有算法含量的是表格HTML 的colspan/rowspan在 GFM 表格里没有对应物我们的决策是内容展开信息不丢优先实现是占据即复制的网格算法// editor-build/src/edit/pasteConvert.ts表格网格展开节选// 网格展开colspan/rowspan 内容直接写入目标格占据即复制// 列游标推进查 grid[r]rowspan 从上方占据的格已非 null跳过constgrid:(string|null)[][][];for(letr0;rrowEls.length;r){letcol:number0;constcells:HTMLCollectionrowEls[r].children;for(letc0;ccells.length;c){constcellElcells.item(c);consttagcellEl?.tagName.toLowerCase();if(tag!tdtag!th)continue;// 跳过被占据的格rowspan 展开 / 本行先前单元格写入while(colgrid[r].lengthgrid[r][col]!null){col;}constcolspanthis.spanAttr(cellEl,colspan);constrowspanthis.spanAttr(cellEl,rowspan);consttextthis.convertCell(cellElasHTMLElement);for(letdc0;dccolspan;dc){for(letdr0;drrowspan;dr){while(grid.lengthrdr)grid.push([]);while(grid[rdr].lengthcoldc)grid[rdr].push(null);grid[rdr][coldc]text;// 展开的内容复制进每个被合并的格}}colcolspan;}}// 列数取最大、短行补空再按表头对齐生成 |:---:| 分隔行另一个高频场景是 Excel/WPS复制区域根本没有text/html只有制表符分隔的纯文本。兜底转换器设了严格准入条件防止把普通多行文本误转成表格// editor-build/src/edit/pasteConvert.tsTSV 兜底节选exportfunctionconvertTsvToMarkdown(text:string):string|null{constlinesnormalized.split(\n).filter(ll.trim().length0);if(lines.length2)returnnull;// 至少两行constcolCountlines[0].split(\t).length;if(colCount2)returnnull;// 至少两列for(constloflines){if(l.split(\t).length!colCount)returnnull;// 每行列数必须一致}// 通过后单元格内竖线转义 \|按最宽列对齐输出 GFM 表格}验证结果转换器 45 个 jsdom 用例全绿37 个结构转换 8 个标记往返真机模拟器实测网页表格粘贴成 GFM 表格、Excel 区域自动成表、合并单元格展开后列数对齐。四、坑二ArkWeb 里剪贴板时隐时现分析定位这是整个攻坚里最硬的平台坑。现象分流器分支 ③ 在真机上经常拿不到text/html——外部应用复制的富文本web 层的clipboardData.types是空的。第一轮装机 CDP 取证的结论原生 pasteboard API 写入的剪贴板内容web 层完全不可见连 text/plain 都空只有 web 内核自写的内容能读回。按这个结论设计了补救架构——web 层拦截粘贴后不依赖自己的clipboardData改为请原生层出面读系统剪贴板再回传// entry/src/main/ets/pages/Index.ets原生探测节选privateasyncdoPasteHtmlProbe():Promisevoid{lethtml;lettext;letmarkpinMd;constpasteDataawaitpasteboard.getSystemPasteboard().getData();htmlpasteData.getPrimaryHtml();// 主记录 HTML无则空串textpasteData.getPrimaryText();if(pasteData.getPrimaryMimeType()Index.MARKPIN_MD_MIME){markpinMdpasteData.getPrimaryText();// 应用内保真主记录见坑三}sender.send(pasteHtmlData,JSON.stringify({html,text,markpinMd}));}web 侧收到回执后按优先级落盘插入// editor-build/src/edit/pasteIntercept.ts回执处理节选if(markpinMd.length0){// 最高优先自定义 MIME 主记录 markdown 源码原文零混染零往返损失sourcenormalizePasteBlock(view,from,to,markpinMd);}elseif(html.indexOf(RICH_COPY_MARK)0){// 旧版原生降级剥标记强制转换自产 HTML跳过结构判定constforcedconvertHtmlToMarkdown(html.slice(markPosRICH_COPY_MARK.length),true);sourceforced!null?normalizePasteBlock(view,from,to,forced.markdown):text;}else{constresulthtml.length0?convertHtmlToMarkdown(html):null;sourceresult!null?result.markdown:nativeProbeFallback;// 600ms 超时的纯文本兜底}转折自己的结论被自己推翻几个版本后再取证同样的读法又能读到完整内容了。回看两轮数据最终认知修正为ArkWeb 的剪贴板透传行为随版本和写入方漂移单点实测结论有保质期。修复不是删掉 probe它在读不到的场景依然是唯一通路而是让两条路并存web 直读路径保留为快路径probe 作为兜底600ms 超时自动回退纯文本——哪个能用用哪个赌单点才是 bug。验证结果双通道架构经装机两轮回归直读路径与 probe 路径分别注入验证均正确落盘超时回退路径无残留。五、坑三复制 bbb粘出**bbb**bbb分析定位最有戏剧性的一个。开启「复制包含格式」后渲染态复制一个加粗词 bbb粘贴出来bbb**bbb**凭空多一截。按第二节的方法论走先疑粘贴执行了两次——否掉落盘只有一次再疑自动化合成按键的伪影——换真实键盘复测还在只是症状变成**bbb**bbb。两次直觉判断都被证伪停止猜测装机挂日志写侧读侧同抓实锤复制端写入text/html pstrongbbb/strong/ptext/plain **bbb**源码粘贴端读到text/plain **bbb**bbb——剪贴板桥为 HTML 记录自动派生了一份纯文本备选bbb和附加的源码记录**bbb**在文本视图里拼接。结论公共 MIMEtext/plain不可承载保真源系统会在背后动它。修复代码给剪贴板开一条专线// entry/src/main/ets/pages/Index.ets复制端节选privatestaticreadonlyMARKPIN_MD_MIME:stringmarkpin/markdown;if(html.length0){// 主记录改自定义 MIMEmarkdown 源码原文——应用内粘贴保真通道。// 实证text/html 会被剪贴板桥派生文本混染text 视图 附加 text // HTML 派生文本拼接自定义 MIME 不受派生影响。// text/html 与 text/plain 供外部应用消费。constpasteDatapasteboard.createData(Index.MARKPIN_MD_MIME,text);pasteData.addRecord(pasteboard.MIMETYPE_TEXT_HTML,html);pasteData.addRecord(pasteboard.MIMETYPE_TEXT_PLAIN,text);awaitthis.setDataWithRetry(systemPasteboard,pasteData,text);}逻辑一句话自定义 MIME 系统不认识所以不会去派生拼接是唯一零污染通道外部应用不认识这个格式自动忽略各自拿自己吃得下的记录。读端getPrimaryMimeType()命中即直插源码见坑二回执代码第一分支。顺手修掉一个连带问题公式在 HTML 往返中会失真渲染管线实例把$..$转成了占位元素复制端换用无公式规则的干净转换实例后无损。验证结果修复版本装机复测渲染态复制 bbb → 粘贴**bbb**渲染粗体保真成立8 个标记往返用例粗体/链接/代码块/公式字面等全绿。六、补一刀渲染态复制丢#复制端还有最后一个缺口拖选标题文字只能得到裸文字。根因清晰——渲染态选中区域不含被隐藏的语法符号。修复是一个纯函数吸附选区边界落在格式单元内部时扩展到完整单元带src参数时再做行级吸附标题/列表/引用吸附到整行含#、- [x]、前缀// editor-build/src/render/mdParser.ts选区吸附节选exportfunctionexpandRangeToTokens(tokens,from,to,src?){constexpandablett.typebold||t.typeitalic||t.typestrikethrough||t.typecode_inline||t.typelink||t.typeimage||t.typemath_inline;for(consttoftokens){if(!expandable(t))continue;letfullFromt.from,fullTot.to;for(constmoft.markerRanges){// 语法符号区间并入完整范围fullFromMath.min(fullFrom,m.from);fullToMath.max(fullTo,m.to);}if(startfullFromstartfullTo)startfullFrom;// 两端单调收敛if(endfullFromendfullTo)endfullTo;}// src 在场时块级吸附heading/list_item/task_list/blockquote → 吸到所在行行首..行尾...}这个函数从 14 个用例行内吸附扩到 34 个加块级吸附全程无回归——纯函数 用例先行的红利。七、验证体系与最终行为最终验证状态转换 45/45、吸附 34/34、10 个测试套件 302 用例全绿模拟器全链路通过真机 30 条验证清单在册待跑表格/结构/图片/协同/兜底五组——这是本篇的连载钩子。产品语义最终定稿成一张表场景行为应用内复制 → 应用内粘贴源码保真自定义 MIME 专线零混染零损失开「复制包含格式」→ 粘到外部应用带格式text/html 记录WPS/邮件不丢样式关开关复制纯源码切片渲染态复制带格式内容任何部分吸附为完整格式单元**bbb**/# 标题八、能力边界表事项AI 表现我的结论转换器/吸附等纯函数实现一次成型测试全绿纯函数 用例先行是本轮最大正资产平台剪贴板行为预判两次给出当时合理、后被推翻的结论文档和单次实测都不背书关键路径双通道兜底根因定位混染拼贴等直觉判断两轮均错插桩取证后命中别让 AI 猜让 AI 加日志拿证据方案取舍引库 vs 自研、合并单元格策略给利弊人拍板可控性与产品语义是人的判断回归保护稳定302 个用例守住十几次返工九、心得收尾跨运行时边界的功能设计时就画双通道。读得到和读不到我们都遇到过两条路并存不是冗余是生存策略剪贴板是共享资源别信任它的公共视图。系统会为 HTML 派生文本、会拼接记录保真数据走自定义 MIME 专线疑难杂症的正确姿势是取证不是推理。两次直觉根因被证伪之后写侧读侧同抓的日志十分钟钉死真凶。如果你也在试 AI 开发鸿蒙或者想看后续关注专栏所有踩坑都会持续更新。