前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本文以仓库中 tests/plugins/easyimage/manual/easyimage.md 手动测试文档为主线系统梳理 CKEditor 4 Easy Image 插件的核心功能验证点同编辑器复制粘贴、跨编辑器复制、图片对齐、图注增删、文件系统拖拽上传、跨站图片复制并结合 plugins/easyimage/plugin.js、plugins/imagebase/plugin.js、plugins/cloudservices/plugin.js 等源码与配套测试用例讲清插件的配置参数、运行前提与底层实现。读完本文你将能独立搭建 Easy Image 手动测试环境理解其上传-响应-展示闭环并掌握全套配置项的用法。一、Easy Image 是什么从手动测试文档看功能全貌Easy Image 是 CKEditor 4 内置的开箱即用图片插件easyimage它把图片上传、云端响应、响应式srcset生成、对齐样式、图注编辑整合为一个统一的 widget。仓库中的手动测试文档 tests/plugins/easyimage/manual/easyimage.md 是验证该插件各项能力的最佳入口其给出的待检查清单如下Copying and pasting image in the same editor在同一编辑器内复制粘贴图片Copying and pasting image between editors在两个编辑器之间复制粘贴图片Image alignment图片对齐full / side / 左 / 中 / 右Image caption / removing image caption添加与移除图片图注captionDropping image from the filesystem从文件系统拖拽图片到编辑区Copying image from the other site从其他网站复制图片含 Base64 内联图片后粘贴。这六项覆盖了 Easy Image 在真实场景中的全部高频操作。后文将逐一结合源码与测试说明每一项背后的实现机制。二、手动测试环境三形态编辑器与云服务配置手动测试对应的 HTML 页面是 tests/plugins/easyimage/manual/easyimage.html它同时创建了三种编辑器形态编辑器形态创建方式说明ClassicCKEDITOR.replace( classic, commonConfig )经典 iframe 编辑区wysiwygareaDivareaCKEDITOR.replace( divarea, { extraPlugins: divarea } )以div代替 iframe 的编辑区InlineCKEDITOR.inline( inline, commonConfig )原地编辑contenteditabletrue三种形态共享同一份commonConfig其中两个配置项是整个 Easy Image 能否工作的关键var commonConfig { cloudServices_uploadUrl: easyImageTools.CLOUD_SERVICES_UPLOAD_GATEWAY, cloudServices_tokenUrl: easyImageTools.CLOUD_SERVICES_TOKEN_URL };cloudServices_uploadUrl云服务图片上传网关地址cloudServices_tokenUrl换取安全令牌token的端点地址。测试助手 tests/plugins/easyimage/_helpers/tools.js 中给出了这两个地址的真实取值测试环境专用CLOUD_SERVICES_UPLOAD_GATEWAY: https://33333.cke-cs.com/easyimage/upload/, CLOUD_SERVICES_TOKEN_URL: https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt测试页面顶部还有一句提示Note, this test uses a real Cloud Service connection, so you might want to be on-line .——即该手动测试依赖真实云服务连接验证上传结果时需要联网。手动测试的元数据Bender Tags文档头部的bender-tags等指令是 Bender 测试框架的元数据用于告诉测试运行器该用例的运行条件bender-tags: 4.9.0, 932, feature, generic bender-ui: collapsed bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, easyimage, undo bender-include: ../_helpers/tools.js4.9.0该功能自 CKEditor 4.9.0 引入932关联的内部需求编号bender-ckeditor-plugins测试页面需要加载的插件列表其中easyimage是核心undo用于验证撤销/重做对上传流程的影响bender-include引入共享测试助手。三、图片 Widget 的数据结构upcast 与 downcastEasy Image 的一切都围绕一个名为easyimage的 widget 展开其内部结构为标准的figure图片语义由 plugins/imagebase/plugin.js 中的模板定义figure class{imageClass} img alt{alt} src{src} / figcaption{caption}/figcaption /figure在 plugins/easyimage/plugin.js 中widget 的upcasts定义决定了什么样的 HTML 会被升级成 widgetupcasts: { figure: function( element ) { if ( ( !figureClass || element.hasClass( figureClass ) ) element.find( img, true ).length 1 ) { return element; } } }即一个figure元素只要带有约定的 class默认easyimage且内部恰好包含一张img就会被 upcast 成 Easy Image widget。手动测试页面中的初始内容正是这种结构见 easyimage.htmlfigure classimage easyimage easyimage-side img src../../image2/_assets/foo.png altfoo figcaptionTest image/figcaption /figure测试用例 tests/plugins/easyimage/widget.js 中的test upcasting image widget (figure)验证了该 upcast 逻辑并额外验证当easyimage_class配置为null时任何figure即使没有easyimageclass都会被 upcast。3.1 允许内容ACFwidget 还声明了自己的允许内容Allowed ContentallowedContent: { figure: { classes: config.easyimage_sideClass }, img: { attributes: !src,srcset,alt,width,sizes } }, requiredContent: figure; img[!src]这解释了为什么上传成功后的图片会带有srcset、sizes、width等属性——它们是响应式图片的关键。四、对齐样式full / side / 左 / 中 / 右Easy Image 内置五种样式本质都是往figure上添加不同的 class见 plugins/easyimage/plugin.js 中getStylesForEditor样式键添加的 class用途fulleasyimage-full通栏整幅显示sideeasyimage-side侧边图浮于文字一侧最大占 50% 宽度alignLefteasyimage-align-left左对齐alignCentereasyimage-align-center居中alignRighteasyimage-align-right右对齐每种样式对应一个命令和一个按钮命令名遵循easyimage 样式名PascalCase规则例如easyimageSide命令与EasyImageSide按钮。其 CSS 实现在 plugins/easyimage/styles/easyimage.cssside样式float: right; max-width: 50%; min-width: 10em; margin-left: 1.5em;并针对 Chrome 原生 bug 特设了body.cke_editable .cke_widget_wrapper_easyimage-side { max-width: 50vw; }align-center样式margin: 0 auto; max-width: 90%;。手动测试文档 tests/plugins/easyimage/manual/styles.md 给出了肉眼验证要点full 与 side 之间应存在明显的视觉差异side 图片最多占据 50% 的空间多个 side 图片不能排列在同一水平线上因为clear: both与浮动规则。命令的上下文敏感行为由 plugins/easyimage/plugin.js 中的createCommandRefresh实现只有当聚焦的 widget 是easyimage时样式命令才会被启用否则处于CKEDITOR.TRISTATE_DISABLED状态。测试 tests/plugins/easyimage/commands.js 的test commands are enabled only on widget精确验证了这一状态机未聚焦时三个命令均为 DISABLED聚焦后easyimageFull为 ON、其余为 OFF。五、图注Caption的添加与移除手动测试清单中的 Image caption / removing image caption 对应 imagebase 的 caption 特性plugins/imagebase/plugin.js 中getCaptionFeaturewidget 内部通过figcaption可编辑区域editables.caption实现图注编辑其允许内容为br em strong sub sup u s; a[!href,target]当图注为空且 widget 未聚焦时figcaption会被隐藏data-cke-caption-active/data-cke-caption-hidden当 widget 聚焦且图注为空时会显示占位符文案editor.lang.imagebase.captionPlaceholder提示用户输入图注手动测试页面 tests/plugins/easyimage/manual/balloontoolbar/caption.md 专门覆盖了图注占位符闪烁等边界场景。六、粘贴与拖拽上传从文件到云端 URL 的完整链路6.1 文件系统拖拽 / 剪贴板粘贴Dropping image from the filesystem 依赖 imagebase 的 upload 特性plugins/imagebase/plugin.js 中getUploadFeature。其工作流程为编辑器监听paste事件检查dataTransfer中是否包含文件isFileTransfer()用 widget 定义中的supportedTypes正则过滤文件类型。Easy Image 支持的格式定义在 plugins/easyimage/plugin.js 顶部SUPPORTED_IMAGE_TYPES [ jpeg, png, gif, bmp ];对每个匹配的文件通过_spawnLoader创建cloudServicesLoader并以URL.createObjectURL( curFile )生成临时 blob URL 插入 widget_insertWidget上传期间 widget 外层会加上cke_widget_wrapper_uploadingclass图片透明度降为0.75见 easyimage.css同时显示进度条上传完成后uploadDone事件处理器把响应中的default地址写入img[src]并用_parseSrcSet把各尺寸地址拼成img[srcset]同时写入sizes: 100vwplugins/easyimage/plugin.jsthis.on( uploadDone, function( evt ) { var resp loader.responseData.response, srcset CKEDITOR.plugins.easyimage._parseSrcSet( resp ); this.parts.image.setAttributes( { data-cke-saved-src: resp[ default ], src: resp[ default ], srcset: srcset, sizes: 100vw } ); } );上传失败网络错误等时触发uploadFailed弹出语言包中的提示文案并移除该 widget见 uploadintegrations.js 的test handling failed uploads。6.2 粘贴内联 Base64 图片IE11 与 FirefoxCopying image from the other site 以及从剪贴板粘贴截图会落入addPasteListener的专门处理plugins/easyimage/plugin.js。该监听器针对src为data:image/(jpeg|png|gif|bmp);base64,的img元素——这类情况典型出现在IE11 从剪贴板粘贴图片Firefox 从剪贴板粘贴单个图片文件。处理逻辑是把粘贴的 HTML 放入临时文档解析逐个查找匹配的img为每个图片 spawn loader 并替换为 Easy Image widget最终把转换后的 HTML 写回粘贴数据。这里同时做了防 XSS 处理document.implementation.createHTMLDocument和只读编辑区跳过逻辑。测试 tests/plugins/easyimage/pasteintegration.js 系统验证了格式白名单jpeg、gif、png、bmp会被 upcast而svg、foobar、text/html一律不会被转换。6.3 云服务加载器与令牌机制上传动作由 plugins/cloudservices/plugin.js 中的cloudServicesLoader完成上传 URL 缺省取config.cloudServices_uploadUrl缺失时抛错cloudservices-no-upload-url请求前通过cloudServices_tokenUrl异步获取令牌并缓存在内存中默认每小时REFRESH_INTERVAL 3600000刷新一次发送请求时把文件放入file字段并在Authorization请求头中携带令牌响应在fileUploadResponse事件中被解析为 JSON供uploadDone使用。6.4 上传按钮除拖拽/粘贴外插件还提供工具栏上传按钮EasyImageUpload命令easyimageUpload。其实现plugins/easyimage/plugin.js 的addUploadButtonToToolbar会创建一个隐藏的input typefile acceptimage/* multiplemultiple选中文件后模拟触发paste事件从而复用 imagebase 的全部上传链路。对应手动测试见 tests/plugins/easyimage/manual/uploadbutton.md。七、配置参数全表以下是 Easy Image 的完整可配置项均声明于 plugins/easyimage/plugin.js 尾部配置项类型默认值说明easyimage_classString/nulleasyimage所有 Easy Image widget 使用的 CSS class设为null时任何figure都会升级为 widgeteasyimage_stylesObject{}自定义样式集合每个样式可含attributes、label、icon、iconHiDpi、group新增样式会自动生成EasyImageName按钮与easyimageName命令easyimage_defaultStyleString/nullfull新插入 widget 的默认样式对应easyimage_styles的键null表示不应用默认样式easyimage_toolbarString[]/String[EasyImageFull, EasyImageSide, EasyImageAlt]选中图片时气泡工具栏balloon toolbar显示的按钮启用 contextmenu 插件时也会同步生成右键菜单项cloudServices_uploadUrlString云服务上传端点Easy Image 正常工作必须设置cloudServices_tokenUrlString令牌端点必须与上传 URL 配套设置7.1 自定义样式示例// 自定义样式替换 full 的 class并新增两种边框样式 config.easyimage_styles { full: { // 仅修改 class 名图标与标签沿用默认 attributes: { class: my-custom-full-class } }, skipBorder: { attributes: { class: skip-border }, group: borders, label: Skip border }, thickBorder: { attributes: { class: thick-border }, group: borders, label: Thick border } };7.2 默认样式与默认工具栏// 让 side 成为默认样式 config.easyimage_defaultStyle side; // 仅保留对齐命令的气泡工具栏 config.easyimage_toolbar [ EasyImageAlignLeft, EasyImageAlignCenter, EasyImageAlignRight ];测试 tests/plugins/easyimage/config.js 对以上配置逐一做了断言包括自定义easyimage_class后 widget 仍带默认easyimage-fullclass、easyimage_defaultStyle: side时新 widget 带easyimage-sideclass、easyimage_defaultStyle: null时 widget 元素不附加任何样式 class、字符串与数组两种easyimage_toolbar语法等价等。八、气泡工具栏与右键菜单集成选中图片后气泡工具栏balloon toolbar会出现在图片上方默认包含三个按钮EasyImageFull整幅、EasyImageSide侧边、EasyImageAlt修改替代文本。对应手动测试见 tests/plugins/easyimage/manual/balloontoolbar/balloontoolbar.md验证要点包括点击图片应弹出含三个按钮的气泡工具栏工具栏位置应随图片尺寸变化而刷新插件在图片异步加载完成后调用toolbar.reposition()见 widgetinit中的getNaturalWidth逻辑按钮状态应实时反映命令状态createCommandRefresh。此外plugins/easyimage/plugin.js 的addContextMenuItems会把easyimage_toolbar中的按钮同步注册为右键菜单项若希望完全自定义右键菜单可参考手动测试 customtoolbar.md该用例将工具栏替换为Copy / Paste以验证自定义能力。修改替代文本的对话框由 plugins/easyimage/dialogs/easyimagealt.js 实现对话框打开时从model.parts.image读取当前alt值确认后写回。测试 commands.js 验证了对话框初始值取自图片、修改后正确写回img[alt]且对话框模型指向当前 widget。九、环境兼容性与已知限制插件在init与afterInit中都调用了isSupportedEnvironment()isSupportedEnvironment: function() { return !CKEDITOR.env.ie || CKEDITOR.env.version 11; }即IE10 及以下版本不支持 Easy Image在 IE8/IE10 下整个测试套件都会被忽略见 uploadintegrations.js 的init注释。其余限制还包括上传依赖真实的 CKEditor Cloud Services 服务离线环境无法完成上传会触发uploadFailed并弹出 Your image could not be uploaded due to a network error.文案定义于 plugins/easyimage/lang/en.js粘贴/拖拽仅接受jpeg/png/gif/bmp四种格式SVG 等不会被转换为 Easy Image widget见 pasteintegration.js插件依赖链为requires: imagebase,balloontoolbar,button,dialog,cloudservices其中 imagebase 又依赖widget,filetools。十、如何快速体验与验证查看测试页面直接打开 tests/plugins/easyimage/manual/easyimage.html联网后即可在 Classic / Divarea / Inline 三种编辑器中执行手动测试清单的六项操作核对上传结果进入源代码模式确认图片src以https://something.cdn.cke-cs.com/开头测试专用网关为https://33333.cdn.cke-cs.com/见 upload.md并检查srcset与sizes属性是否已生成运行自动化测试在仓库根目录通过 Bender 运行tests/plugins/easyimage/下的widget.js、commands.js、config.js、pasteintegration.js、uploadintegrations.js等套件即可回归验证本文所述的全部行为。十一、总结Easy Image 的手动测试清单看似简单背后却是一条完整的工程链路figure语义化结构upcast/downcast→ 样式与图注的可编辑 widget → 文件拖拽/粘贴拦截 →cloudServicesLoader上传 → 响应式srcset生成 → 气泡工具栏与命令状态机。理解 easyimage.md 列出的六项操作再对照 plugins/easyimage/plugin.js 与 plugins/imagebase/plugin.js 的实现你就能完全掌握该插件的行为边界也能为其编写自定义样式、自定义工具栏或二次开发打好基础。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Easy Image 与 Balloon Toolbar 集成剖析从手动测试清单到源码实现CKEditor 4 Easy Image 与 Balloon Toolbar 集成剖析从手动测试清单到源码实现 导读 本文围绕 CKEditor 4 中 E前端UI组件CKEditor 4 链接插件电话链接tel:功能手动测试指南与源码原理解析CKEditor 4 链接插件电话链接tel:功能手动测试指南与源码原理解析 导读 本文围绕 CKEditor 4 仓库中的手动测试文档 phone.md前端UI组件CKEditor 4 Easy Image 插件 data URI 图片粘贴与 upcast 行为深度解析从手动测试规范到源码实现CKEditor 4 Easy Image 插件 data URI 图片粘贴与 upcast 行为深度解析从手动测试规范到源码实现 导读 本文以 CKEdit前端UI组件上一篇JSON Canvas深度解析无限画布数据格式的技术实现与架构设计下一篇Orleans分布式框架边缘计算设备管理的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
