TinyMCE弹窗焦点问题：无法操作图片上传输入框

嘿，我碰到过类似的TinyMCE交互问题，咱们一步步排查解决：

1. 排查弹窗层级被覆盖的问题 #

很多时候这种“看得见点不着”的情况，是因为页面其他元素的z-index层级比TinyMCE弹窗更高，把弹窗的交互区域悄悄挡住了。你可以试试给TinyMCE的弹窗容器强制设置更高的层级：

.tox-dialog {
  z-index: 99999 !important;
}

添加这段CSS后刷新页面，再测试弹窗的input是否能正常选中。

2. 检查是否有JS事件阻止了交互 #

如果页面里有全局的事件监听（比如document.addEventListener('click', ...)）或者自定义的事件委托，可能不小心拦截了弹窗内的点击/输入事件。你可以：

• 暂时注释掉页面里的自定义JS代码，测试弹窗是否恢复正常
• 打开浏览器开发者工具的Event Listeners面板，查看input元素上是否有异常的preventDefault或stopPropagation事件

3. 验证TinyMCE的图片上传配置 #

如果自定义了图片上传相关的配置，比如file_picker_callback或者images_upload_handler，要确保这些回调没有覆盖默认的弹窗交互逻辑：

• 先暂时恢复TinyMCE的默认图片上传配置，测试弹窗是否正常
• 检查自定义回调里有没有阻止input默认行为的代码（比如event.preventDefault()）

4. 排查浏览器/插件冲突 #

• 换一个主流浏览器（Chrome/Firefox/Edge）测试，排除浏览器兼容性问题
• 禁用TinyMCE的第三方插件，只保留核心功能，看是否是插件冲突导致的

调试小技巧 #

打开浏览器开发者工具的Elements面板：

1. 找到弹窗里的input元素，查看它的pointer-events属性是否被设置为none（如果是，改成auto）
2. 用面板左上角的选择工具选中input，看是否有其他透明元素覆盖在它上面（调整覆盖元素的z-index或隐藏它）

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