前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本篇技术指南围绕 CKEditor 4 中imagebase插件的link特性展开讲解图片 Widget如 Easy Image如何与 Link 插件深度集成既能把已带链接的图片正确还原upcast也能通过链接对话框、上下文菜单为图片 Widget 添加、编辑与取消链接。读者将掌握CKEDITOR.plugins.imagebase.addFeature的用法、link特性的底层实现原理以及如何使用 Bender 手动测试与自动化测试验证这一集成。功能背景4.9.0 引入的 Image Base 与 link 特性imagebase插件随 CKEditor 4.9.0 与 Easy Image、Cloud Services 一起引入见 CHANGES.md它为图片类 Widget 提供一组可复用的特性feature包括caption图注、upload上传与link链接。其中link特性的使命是让图片 Widget 与 Link 插件无缝协作对应官方 issue #932。从源码看三种特性的定义集中在 plugins/imagebase/plugin.jsvar featuresDefinitions { caption: getCaptionFeature(), upload: getUploadFeature(), link: getLinkFeature() };link特性本身不依赖link插件也能注册但只有在link插件被加载时完整的链接编辑能力才会被激活setUp中会做插件存在性检查。这也意味着 link 特性可以在不加载 Link 插件的情况下作为纯内容模型存在。手动测试文档解读验证什么、怎么验证本仓库中的关联文档 tests/plugins/imagebase/features/manual/link.md 是一份 Bender 手动测试说明。其头部元数据定义了运行环境与目标bender-tags: 4.9.0, feature, 932 bender-ui: collapsed bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, imagebase, link, htmlwriter, elementspath, easyimagebender-tags: 4.9.0, feature, 932该用例归属 4.9.0 功能跟踪 issue #932。bender-ui: collapsed以折叠 UI 运行手动测试。插件清单同时包含imagebase、link与easyimage验证的是三者的组合场景。手动测试的核心检查清单共有 5 项是本文后续所有源码分析、自动化用例的验收基准带链接的 Widget 能正确 upcast粘贴或载入figurea href...img/afigcaption.../figcaption/figure这类 HTML 时图片 Widget 应被正确还原且链接被保留为 Widget 的link部分。Widget 可被添加链接选中图片 Widget 后执行link命令可在其外层包裹a。Widget 可被取消链接执行unlink命令后a应从 Widget 中移除图片本身保留。Widget 内的链接可编辑再次打开链接对话框时现有 URL 与各属性应正确回填修改后能写回。链接对话框中定义的所有属性都绑定到链接URL、target、锚点、邮件、高级属性等经对话框提交后都应反映到a元素的属性上或按规则移除。对应的手动测试页面与link.md配对的手动测试页面是 tests/plugins/imagebase/features/manual/link.html它构造了两个典型场景第一个figure无链接的图片 Widget第二个figure预先带有https://cksource.com链接的图片 Widget。页面通过pluginsLoaded事件动态注册一个测试 Widget并为其挂载link特性script CKEDITOR.replace( classic, { on: { pluginsLoaded: function( evt ) { var editor evt.editor, plugin CKEDITOR.plugins.imagebase; plugin.addImageWidget( editor, testWidget, plugin.addFeature( editor, link, {} ) ); } }, height: 500 } ); /script这段代码是在任意自定义图片 Widget 上启用链接能力的最短路径先addFeature( editor, link, definition )将特性合并进 Widget 定义再addImageWidget( editor, name, definition )完成注册。link 特性的源码实现从解析到渲染的完整链路link特性的核心实现位于 plugins/imagebase/plugin.js 的getLinkFeature()返回对象中可分为内容模型与交互逻辑两层。内容模型parts 与 allowedContentreturn { allowedContent: { a: { attributes: !href } }, parts: { link: a }, // ... };parts.link a将 Widget 内部的a元素注册为名为link的部件后续widget.parts.link即指向该链接元素allowedContent声明a的href为强制属性!前缀保证链接 Widget 内容可被内容过滤器放行。数据双向绑定data 处理器data处理器plugins/imagebase/plugin.js负责 Widget 数据与 DOM 的同步覆盖三种状态data: function( evt ) { var editor this.editor, link evt.data.link, img this.element.findOne( img ); // Widget 初始化时若已带链接解析其属性作为初始数据。 if ( typeof link undefined this.parts.link ) { this.setData( link, getLinkData( this ) ); } if ( typeof link undefined ) { return; } // 取消链接移除 a 元素并清空 parts.link。 if ( link null ) { this.parts.link.remove( true ); this.parts.link null; // 重置链接状态#tp3298避免后续 setData 再次触发。 delete evt.data.link; } else { // 添加/更新链接根据数据创建或复用 a 并写入属性。 this.parts.link createLink( editor, img, link ); } }其中两个关键工具方法都委托给 Link 插件getLinkData调用 CKEDITOR.plugins.link.parseLinkAttributes把现有a的href、target、download、高级属性等解析为链接对话框可直接使用的数据对象createLink内部调用 CKEDITOR.plugins.link.getLinkAttributes把对话框数据转换成{ set: {...}, removed: [...] }两段式属性集合再通过setAttributes/removeAttributes应用到a上。createLink的复用优先策略值得注意plugins/imagebase/plugin.jsfunction createLink( editor, img, linkData ) { var link img.getAscendant( a ) || editor.document.createElement( a ); addLinkAttributes( editor, link, linkData ); if ( !link.contains( img ) ) { link.replace( img ); img.move( link ); } return link; }若图片已在a内部则直接复用该元素否则新建a并包裹图片实现原地添加链接而不破坏 Widget 结构。这正对应手动测试第 5 项所有属性都绑定到链接getLinkAttributes会依据emailProtection配置、target 类型等生成/清除data-cke-saved-href、target、onclick等一系列属性。交互逻辑链接对话框与 unlink 命令接管setUpplugins/imagebase/plugin.js在编辑器层面注册了三类监听这是Widget 可添加/编辑/取消链接检查项 2、3、4的实现基础上下文菜单当 Widget 带有parts.link时在右键菜单中启用link与unlink项init中通过evt.data.link evt.data.unlink CKEDITOR.TRISTATE_OFF完成plugins/imagebase/plugin.js。链接对话框接管监听编辑器的dialogShow事件当对话框名为link且焦点在可链接 Widget 上时用widget.data.link回填对话框dialog.setupContent隐藏显示文本字段图片链接无需显示文本以优先级 9 注册一次性ok监听提交后把用户输入通过widget.setData( link, data )写回 Widget并evt.stop()阻止默认行为把多余链接塞进图注plugins/imagebase/plugin.js对话框关闭时移除该监听并恢复显示文本字段。unlink 命令覆盖addUnlinkListener分别接管unlink命令的exec与refreshplugins/imagebase/plugin.jsexecwidget.setData( link, null )移除链接并刷新命令状态refreshWidget 无链接时令unlink命令进入CKEDITOR.TRISTATE_DISABLED禁用态。值得注意的是覆盖仅当链接确实属于 Widget 时生效若内联 Widget 是被外部a包裹则放行默认 unlink 逻辑对应历史 ticket #11814。在 Easy Image 中的真实集成link特性并非只存在于测试页它被 Easy Image 插件实际采用。在 plugins/easyimage/plugin.js 中if ( editor.plugins.link ) { widgetDefinition CKEDITOR.plugins.imagebase.addFeature( editor, link, widgetDefinition ); } widgetDefinition CKEDITOR.plugins.imagebase.addFeature( editor, upload, widgetDefinition ); widgetDefinition CKEDITOR.plugins.imagebase.addFeature( editor, caption, widgetDefinition ); CKEDITOR.plugins.imagebase.addImageWidget( editor, WIDGET_NAME, widgetDefinition );Easy Image 在链接插件已加载的前提下才挂载link特性因此要在编辑器中体验图片链接能力配置时需同时包含link、imagebase或easyimage插件。参考 plugins/easyimage/samples/easyimage.html 的示例配置CKEDITOR.replace( editor, { plugins: easyimage,autogrow,sourcearea,toolbar,undo,wysiwygarea,list,liststyle,format,link,basicstyles,pastefromword, toolbar: [ { name: basicstyles, items: [ Bold, Italic, Strike, -, RemoveFormat ] }, { name: links, items: [ Link, Unlink, Anchor ] }, { name: insert, items: [ EasyImageUpload ] } ], cloudServices_uploadUrl: ..., cloudServices_tokenUrl: ..., height: 500 } );工具栏中的Link/Unlink按钮与图片 Widget 的链接能力共用同一套命令体系这正是link特性复用 Link 插件命令与对话框设计的结果。上下文菜单专项测试linkcontextmenu仓库还提供了独立的上下文菜单手动测试 tests/plugins/imagebase/features/manual/linkcontextmenu.md覆盖三个场景场景 1右键无链接图片 → 菜单中不应出现链接相关选项场景 2为图片添加链接后右键 → 出现Edit Link选项修改 URL 应真正生效场景 3右键带链接图片选择 Unlink → 链接被移除。这些场景验证了init中parts.link存在性判断的正确性只有 Widget 真正包含a部件时右键菜单才暴露链接操作。自动化测试佐证link.js 用例清单手动测试之外自动化用例 tests/plugins/imagebase/features/link.js 对上述行为做了逐项断言在 classic、divarea、inline 三种编辑器模式下运行核心用例包括用例验证点test adding image widget with link feature注册后 Widget 的parts应包含caption: figcaption、image: img、link: atest upcasting image widget with link/with https linkhttp://与https://链接在 upcast 时被解析为{ type: url, url: { protocol, url } }test add link to existing image widget通过对话框设置 URL 后widget.data.link与a属性一致test add/edit/remove link attributetarget的_blank、popup、notSet等类型正确映射到属性集test unlink image widgetunlink 后parts.link为null、data.link为undefined、unlink 命令进入禁用态test calling setData after unlink keeps correct data.link回归 #tp3298unlink 后再次setData不再产生残留的link数据test link/unlink/no link option in context menu右键菜单项的出现与否与 Widget 是否含a严格对应测试辅助函数assertLinkWidget/assertUnlinkWidgettests/plugins/imagebase/features/link.js会同时断言命令状态CKEDITOR.TRISTATE_OFF/TRISTATE_DISABLED、parts.link存在性、data.link结构以及getLinkAttributes生成的属性是否全部落位与手动测试检查项 15 一一对应可作为自动化回归的验收模板。为自定义图片 Widget 启用链接操作与前提若要在自己的图片类 Widget 上获得链接能力按以下步骤即可确保编辑器加载了link插件imagebase的link特性依赖其命令、对话框与属性解析/合成工具在注册 Widget 前调用CKEDITOR.plugins.imagebase.addFeature( editor, link, widgetDefinition )把特性合并进 Widget 定义特性内部通过mergeMethods合并init与data钩子并自动向features数组追加link见 plugins/imagebase/plugin.js再调用CKEDITOR.plugins.imagebase.addImageWidget( editor, name, widgetDefinition )完成注册参考 tests/plugins/imagebase/features/manual/link.html 编写手动测试页或参照 tests/plugins/imagebase/features/link.js 编写自动化断言。需要留意的是link特性假设 Widget 内部图片为img元素this.element.findOne( img )并且createLink会把a直接包裹在img外层若 Widget 模板结构不同需要自行调整parts与data处理逻辑。此外若完全不加载link插件setUp会提前返回特性退化为仅声明allowedContent与parts不会注册任何对话框或菜单逻辑plugins/imagebase/plugin.js。运行测试的入口上述手动与自动化用例均基于 Bender 测试框架仓库根目录的 bender.js、bender.ci.js 与 bender-runner.config.json 为相关配置。手动测试由link.md与link.html配对组成测试页通过CKEDITOR.plugins.imagebase.addFeature( editor, link, {} )动态注册 Widget便于在真实编辑器中逐项核对本文开头列出的 5 项检查清单。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 image2 与 link 插件集成Link 对话框 Display Text 字段的显隐机制与手动验证指南CKEditor 4 image2 与 link 插件集成Link 对话框 Display Text 字段的显隐机制与手动验证指南 导读 本文围绕 CKEdi前端UI组件CKEditor 4 图片 Widget 标题Caption功能机制与手动测试指南CKEditor 4 图片 Widget 标题Caption功能机制与手动测试指南 本篇指南聚焦于 CKEditor 4 中 imagebase 插件提供的前端UI组件CKEditor 4 Enhanced Image 图片拖拽边界测试用例解析dndwithcaption 手动测试与 Widget 拖放机制CKEditor 4 Enhanced Image 图片拖拽边界测试用例解析dndwithcaption 手动测试与 Widget 拖放机制 导读 本文围绕仓前端UI组件上一篇marshmallow元数据配置指南only/exclude参数的高级用法下一篇动态调整Bunyan日志告警阈值基于系统负载的实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
