Tinymce图片选择器点击保存时报错：Cannot read properties of null (reading 'innerHeight') 解决方案咨询

我之前维护旧Vue项目时碰到过一模一样的问题，针对你这个版本的组件报错，给你几个实用的排查和解决方向：

• 检查弹窗DOM是否提前被销毁
  这个错误大概率是TinyMCE内置的图片选择器弹窗在保存操作触发时，对应的DOM容器已经被意外移除了，导致代码试图读取null的innerHeight属性。你可以在保存按钮的回调逻辑里先做个简单的检查：

  // 在保存操作前确认弹窗容器存在
  const dialogContainer = document.querySelector('.tox-dialog__body');
  if (!dialogContainer) return;
  // 再执行原本的保存逻辑
  

  另外也可以检查你的组件生命周期钩子，比如是否在弹窗关闭前就触发了组件的销毁操作，调整逻辑确保弹窗处理完成后再销毁相关组件。

• 升级到同大版本的最新补丁
  3.2.8版本确实存在一些弹窗DOM处理的已知bug，官方在后续的3.x补丁版本里修复了这类问题。你可以直接升级到3.x分支的最新版（比如3.2.10），这个版本兼容Vue 2，不需要大改项目代码：

  npm install @tinymce/tinymce-vue@3.2.10 --save
  

  升级后重新测试，大部分情况下这个错误会直接消失。

• 自定义图片选择器逻辑绕过内置弹窗
  如果升级后还是有问题，你可以完全替换默认的图片选择器，用自定义组件来处理图片上传和插入：

  1. 先在TinyMCE配置里禁用默认的图片弹窗：

     const tinymceConfig = {
       plugins: 'image',
       toolbar: 'image',
       setup: (editor) => {
         editor.ui.registry.addButton('image', {
           icon: 'image',
           onAction: () => {
             // 打开你的自定义图片上传组件
             openYourCustomImageUploader();
           }
         });
       }
     };
     

  2. 在自定义上传组件的保存按钮点击时，手动把图片插入编辑器：

     const openYourCustomImageUploader = () => {
       // 假设你的上传组件返回图片URL
       const imageUrl = 'your-uploaded-image-url';
       const editor = tinymce.get('your-editor-id');
       if (editor) {
         editor.insertContent(`<img src="${imageUrl}" alt="Uploaded image" />`);
       }
     };
     

  这种方式完全避开了内置弹窗的DOM问题，稳定性更高。

• 排查TinyMCE配置冲突
  如果你配置了automatic_uploads、images_upload_handler等图片相关选项，可能和内置弹窗的逻辑冲突。可以先简化配置，只保留最基础的图片插件和工具栏，测试是否还报错：

  const tinymceConfig = {
    plugins: 'image',
    toolbar: 'image',
    // 暂时注释掉所有图片上传相关配置
    // automatic_uploads: true,
    // images_upload_url: '/api/upload'
  };
  

  如果简化后不报错了，再逐个恢复配置，找到冲突的选项后调整对应的逻辑。

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