如何获取CKEditor图片调整器弹出菜单中的Web元素？

捕获动态生成菜单元素的步骤 #

• 打开浏览器开发者工具（快捷键F12），切换到Elements标签页。
• 在编辑器根容器（带ck-editor类的元素）上右键，选择Break on > Subtree modifications。这会让页面在编辑器DOM结构变化时自动暂停。
• 返回页面，点击目标图片调出调整大小的菜单，此时页面会暂停，开发者工具会自动定位到新生成的菜单元素，你就能查看它的标签和属性了。

菜单元素的典型结构 #

CKEditor5的图片调整菜单为动态生成，核心结构示例：

• 菜单容器：带有ck-dropdown、ck-image-resize-dropdown类的<div>元素
• 菜单选项：每个选项是<button>标签，带有ck-button类，且包含data-command属性（比如data-command="imageResize:resizeImage"），用来绑定调整大小的命令

快速查找元素的控制台命令 #

当菜单显示时，在开发者工具的Console标签页执行以下命令，直接列出菜单选项元素：

document.querySelectorAll('.ck-dropdown__panel .ck-button')

内容的提问来源于stack exchange，提问作者javzuk