★ FEATURED ARTICLE 前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读本文以仓库中 imagebase 插件 Upload 功能的手动测试文档tests/plugins/imagebase/features/manual/upload.md为主线系统讲解 CKEditor 4 中将本地文件直接拖入编辑区、自动创建占位 Widget 并显示文件名这一上传链路的测试场景与底层实现。读完本文你将掌握该手动测试的步骤、预期结果、bender 测试元数据的含义并能结合 imagebase 插件源码 理解文件类型匹配、FileLoader 上传、进度条渲染与 Cloud Services 鉴权等核心机制从而具备自行复现、验证与扩展该上传功能的能力。测试文档定位一段面向人工验证的 Upload 功能用例upload.md是 CKEditor 4 基于 Bender 测试框架的手动测试manual test用例归属于 imagebase 插件的 features 目录。其完整内容围绕一个核心交互场景展开测试步骤从文件系统拖拽任意文件到编辑区editable中。预期结果创建一个占位 Widgetplaceholder widget其中包含文件名。注意事项截至文档编写时Cloud Services 只接受图片资源对其他资源类型会返回400状态码Cloud Services 实际返回的 URL 可以在浏览器控制台日志中查看。这段描述虽然简短但它浓缩了三条关键技术事实触发方式是拖放文件drag and drop对应 imagebase 的uploadfeature 在编辑器paste事件上的监听逻辑产物形态是包含文件名的 placeholder widget即上传开始阶段先用本地 blob URL 渲染一个占位 Widget而非直接插入最终图片后端约束是 Cloud Services 网关仅接受图片 MIME 类型其余类型返回400这决定了该功能在默认配置下对非图片文件的失败路径。文档头部还携带了 Bender 测试框架所需的元数据是运行与筛选该测试的关键bender-tags: 4.9.0, feature, 932 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, imagebase, elementspath, placeholder, cloudservices, easyimage bender-include: %BASE_PATH%/plugins/easyimage/_helpers/tools.js其中bender-tags声明了该测试自 4.9.0 版本引入、属于 feature 类测试关联内部 issue 932bender-ckeditor-plugins列出测试编辑器需要加载的插件集合bender-include引入测试辅助脚本实际文件位于 tests/plugins/easyimage/_helpers/tools.js其中定义了CLOUD_SERVICES_UPLOAD_GATEWAY与CLOUD_SERVICES_TOKEN_URL两个测试用的云端地址常量bender-ui: collapsed则控制测试页面在 Bender 结果面板中的展示方式。手动测试页面的完整实现与upload.md配套的页面源码是 tests/plugins/imagebase/features/manual/upload.html它给出了该测试的可运行环境。核心代码可以拆成三层第一层编辑器初始化与云端配置。页面创建一个经典编辑器通过cloudServices_uploadUrl与cloudServices_tokenUrl接入 Cloud Services 网关并加载 easyimage 的内容样式var editor CKEDITOR.replace( classic, { cloudServices_uploadUrl: easyImageTools.CLOUD_SERVICES_UPLOAD_GATEWAY, cloudServices_tokenUrl: easyImageTools.CLOUD_SERVICES_TOKEN_URL, height: 500, contentsCss: /apps/ckeditor/plugins/easyimage/styles/easyimage.css } );第二层为 placeholder Widget 挂载 upload feature。关键代码监听widgetDefinition事件在 placeholder 的定义上调用CKEDITOR.plugins.imagebase.addFeature( this, upload, def )并进一步定制三个上传相关的属性if ( def.name placeholder ) { var ret CKEDITOR.plugins.imagebase.addFeature( this, upload, def ), i; for ( i in ret ) { def[ i ] ret[ i ]; } // 使用 Cloud Services 专用的 Loader 类型。 def.loaderType CKEDITOR.plugins.cloudservices.cloudServicesLoader; // 匹配任意文件类型正则 /^.*$/。 def.supportedTypes /^.*$/; def.progressReporterType CKEDITOR.plugins.imagebase.progressBar; }注意这里supportedTypes被设置为/^.*$/这正是拖入任意文件都会创建占位 Widget的根源——与 easyimage 插件 默认只接受image/(jpeg|png|gif|bmp)的正则形成鲜明对比。第三层用上传事件驱动 Widget 内容。页面在instanceReady后监听instanceCreated为每个 placeholder 实例绑定uploadStarted/uploadDone/uploadFailed三个一次性事件实现上传中显示 Uploading...、成功后显示文件名、失败后显示错误码的完整状态机widget.once( uploadStarted, function() { widget.setData( name, Uploading... ); } ); widget.once( uploadDone, function( uploadEvent ) { var loader uploadEvent.data.loader; widget.setData( name, File loader.file.name uploaded! ); console.log( File loader.file.name can be found at loader.responseData.response[ default ] ); } );console.log中打印的response[ default ]就是upload.md末尾提示可以在控制台日志中找到 Cloud Services 实际返回 URL的来源——easyimage 的服务端响应以default字段给出默认尺寸图片地址参见 plugins/easyimage/plugin.js 中的_parseSrcSet与uploadDone处理逻辑。页面开头还有两行环境守卫移动端因缺少文件拖放支持直接bender.ignore()跳过bender.tools.ignoreUnsupportedEnvironment( easyimage )则在 unsupported 环境如 IE10 及以下见 easyimage 插件的isSupportedEnvironment中忽略该测试。底层原理imagebase 的 upload feature 是如何工作的占位 Widget 能凭空出现靠的是 imagebase 插件内置的uploadfeature定义见 plugins/imagebase/plugin.js 的getUploadFeature。它是一个以 mixin 方式提供给 Widget 定义的私有 API通过addFeature注入到目标 Widget 上。其核心链路如下。1. setUp拦截 paste 事件并过滤文件feature 的setUp在编辑器上注册paste监听。当dataTransfer.isFileTransfer()为真且编辑器非只读时遍历拖入的文件用definition.supportedTypes正则逐一匹配 MIME 类型收集所有命中文件后取消默认粘贴行为if ( editor.readOnly || !isFileTransfer ) { return; } for ( var i 0; i filesCount; i ) { curFile dataTransfer.getFile( i ); if ( CKEDITOR.fileTools.isTypeSupported( curFile, definition.supportedTypes ) ) { matchedFiles.push( curFile ); } } if ( matchedFiles.length 0 ) { return; } evt.cancel(); evt.stop();从 tests/plugins/imagebase/features/upload.js 的自动化用例可以验证该过滤行为test dropping supported file type creates a widget断言命中 1 个 Widget而test dropping unsupported file does not create a widget断言 0 个test dropping file into a readonly does not create a widget则验证只读状态下不会创建 Widget。2. 创建 FileLoader 并插入占位 Widget对每个匹配文件feature 依次调用两个私有方法_spawnLoader( editor, curFile, definition, curFile.name )通过editor.uploadRepository.create()创建CKEDITOR.fileTools.fileLoader实例loaderType 可定制默认CKEDITOR.fileTools.fileLoader并调用loader loadMethod发起加载与上传。loadMethod默认为loadAndUpload其行为定义在 plugins/filetools/plugin.js 中先load()用 FileReader 把文件读入内存再链式触发upload()发送 XHR。_insertWidget( editor, definition, URL.createObjectURL( curFile ), true, { uploadId: loader.id } )用URL.createObjectURL()生成的本地 blob URL 作为临时src按 Widget 定义中的模板输出 HTML包装为 Widget 并初始化同时把uploadId写入 Widget 数据建立 Widget 与 Loader 的关联。多文件拖入时代码还通过放大并折叠选区的方式调整光标位置确保每个文件生成独立的 Widget 且最后一个保持选中状态。3. init 与 _beginUpload绑定事件与进度条Widget 实例在ready后读取data.uploadId在editor.uploadRepository.loaders中找回对应的 Loader随即调用_beginUpload。该方法是整个上传状态机的枢纽widget.setData( uploadId, loader.id ); if ( widget.fire( uploadStarted, loader ) ! false widget.progressReporterType ) { if ( !widget._isLoaderDone( loader ) ) { widget.wrapper.addClass( cke_widget_wrapper_uploading ); var progress new widget.progressReporterType(); widget.wrapper.append( progress.wrapper ); progress.bindLoader( loader ); } else { // ... } }它同时注册了loader.on( abort | error | uploaded )三个监听分别映射到failHandling与uploadComplete上传失败或中止时清理cke_widget_wrapper_uploading类触发uploadFailed事件若该事件未被cancel默认行为是调用editor.widgets.del( widget )直接删除 Widget上传成功时触发uploadDone事件交由业务代码如 easyimage 或手动测试页面把 blob URL 替换为服务端返回的最终地址。这些事件在 upload.js 中有逐项断言test events验证成功路径只触发uploadStarted与uploadDonetest upload error验证失败路径触发uploadFailed且 Widget 被移除test upload error event is cancelable验证cancel后可保留 Widget手动测试页面正是用这一机制把失败信息写进占位符文本。4. 进度条progressReporterType 与 progressBar_beginUpload中widget.progressReporterType默认指向CKEDITOR.plugins.imagebase.progressBar见 plugins/imagebase/plugin.js 的ProgressBar。它渲染一个.cke_loader .cke_bar结构updated( progress )按 0~1 的进度值换算百分比并写入width样式bindLoader则把进度条与 Loader 的update事件挂钩并自动在abort/error/uploaded时收尾。进度刷新频率受UPLOAD_PROGRESS_THROTTLING 100毫秒节流控制。值得注意progressReporterType可以被设为false或null以完全禁用进度条也可以在uploadStarted事件中evt.cancel()阻止默认进度条创建——自动化测试test preventing default progress reporter with event与test preventing default progress reporter with widgetDefinition.progressReporterType分别覆盖了这两种方式。若想自定义指示器形态可以参考 tests/plugins/imagebase/features/_helpers/tools.js 中基于progressReporter扩展出的遮罩进度getProgressOverlapType与圆形进度getProgressCircleType其交互演示见 tests/plugins/imagebase/manual/progressbar.html。Cloud Services 集成与 400 响应upload.md特别强调Cloud Services 目前只接受图片其他资源类型返回 400这与 cloudservices 插件的实现紧密相关。在 plugins/cloudservices/plugin.js 中cloudServicesLoader是fileLoader的子类upload()未传 URL 时回退到editor.config.cloudServices_uploadUrl缺失则抛出cloudservices-no-upload-url错误插件在beforeInit阶段通过cloudServices_tokenUrl拉取安全令牌并每隔REFRESH_INTERVAL默认 3600000ms即 1 小时自动刷新未配置 token URL 会抛出cloudservices-no-token-url错误发送请求时插件把上传字段从upload重命名为file并以Authorization请求头携带令牌响应则拦截fileUploadResponse事件将 JSON 响应体原样解析为loader.responseData.response。因此当向该网关拖入非图片文件时服务端返回400Loader 触发error状态Widget 走uploadFailed分支——手动测试页面会把它渲染为Uploading xxx failed (code 400) 这正是upload.md中返回 400 代码在 UI 上的可见表现。顺带一提uploadsimple.html 是同一 feature 的精简演示它只接受image/(jpeg|png)用div而非 placeholder 作为 Widget 模板通过uploadDone/uploadFailed直接把文件名写入元素文本可作为理解自定义 Widget upload feature的最小示例。自动化测试佐证upload feature 的边界行为除了手动测试imagebase 还提供了覆盖度很高的自动化测试 tests/plugins/imagebase/features/upload.js可用来交叉验证本文所述行为测试用例验证点test dropping supported file type creates a widget支持的 MIME 类型生成对应 Widgettest dropping unsupported file does not create a widget不支持的 MIME 类型不生成 Widgettest pasting supported file alongside HTML content does not create a widget文件与 HTML 混贴时不触发上传test multiple files create multiple widgets多文件一次拖入生成多个 Widgettest loader can be customizedloaderType可替换为自定义 Loadertest events/test upload erroruploadStarted、uploadDone、uploadFailed触发路径test default progress reporter/test progress reporter customization默认与自定义进度条test widget gets class during the upload上传中cke_widget_wrapper_uploading类存在完成后移除test copy and paste file during upload上传中复制粘贴 Widget 会共享 Loader 并继续完成上传这些用例同时印证了upload.md未直接写出但真实存在的边界上传中的 Widget 被复制粘贴到同一编辑器甚至另一个编辑器时新 Widget 会依据uploadId找到对应 Loader 并继续上传参见test copy in-progress widget into a different editor。如何运行与验证准备 Bender 环境仓库根目录的 bender.js、bender.ci.js 与 bender-runner.config.json 提供了测试运行配置手动测试通常在bender server启动后于浏览器中访问对应页面运行。加载目标用例打开 upload.html页面会自动创建带 imagebase、placeholder、cloudservices、easyimage 等插件的编辑器。执行测试从本地文件系统拖拽任意文件到编辑区观察是否生成黄色背景的占位 Widget、其文本是否变为文件名打开浏览器控制台查看 Cloud Services 返回的真实 URL。验证失败路径拖入非图片文件预期 Widget 显示400错误信息拖入图片则上传成功后占位内容被替换为File xxx uploaded!。对照自动化结果运行 features/upload.js 可一键回归上述所有边界行为成功、失败、多文件、只读、复制粘贴、进度条等与手动测试互为补充。需要注意该手动测试依赖 Cloud Services 测试网关URL 常量定义在 tests/plugins/easyimage/_helpers/tools.js属于在线服务若离线环境可参考uploadsimple页面将loaderType替换为自定义 Loader 并指向本地上传接口或参考 plugins/filetools/plugin.js 中fileUploadRequest/fileUploadResponse事件自行实现上传响应解析。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4拖拽上传功能实现图片、文件、视频一键上传终极指南CKEditor 4拖拽上传功能实现图片、文件、视频一键上传终极指南 CKEditor 4作为业界领先的富文本编辑器其拖拽上传功能为用户提供了极致便捷的内容前端UI组件CKEditor 4 Enhanced Image 图片拖拽边界测试用例解析dndwithcaption 手动测试与 Widget 拖放机制CKEditor 4 Enhanced Image 图片拖拽边界测试用例解析dndwithcaption 手动测试与 Widget 拖放机制 导读 本文围绕仓前端UI组件CKEditor 4 图片 Widget 标题Caption功能机制与手动测试指南CKEditor 4 图片 Widget 标题Caption功能机制与手动测试指南 本篇指南聚焦于 CKEditor 4 中 imagebase 插件提供的前端UI组件上一篇Wasmtime 测试用例缩减实战从 wasm-tools shrink 到 bugpoint 的完整工具链与谓词编写指南下一篇react-admin Breadcrumb 组件完全指南基于 App Location 的自适应导航面包屑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
