TinyMCE上传图片时进度动画（throbber）不显示如何解决？

我写了下面这段代码，按照官方文档说明，应该会显示throbber/进度动画，但实际没出现。图片在几秒无操作后能正常上传，之后源输入框和图片尺寸字段也会被正确填充。请问怎么才能在图片上传过程中显示这个动画效果？

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/<api-key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>

  <textarea>
    Welcome to TinyMCE!
  </textarea>

  <script>
  tinymce.init({
    selector: 'textarea',
    plugins: 'image code',
    toolbar: 'undo redo | link image | code',

    file_picker_callback: function(callback, value, meta) {
      
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.onchange = function() {

            var file = this.files[0];

            // 显示进度条
            tinymce.activeEditor.setProgressState(true);

            // 执行文件上传
            var formData = new FormData();
            formData.append('file', file);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload.php');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    var json = JSON.parse(xhr.responseText);
                    callback(json.location);

                    // 隐藏进度条
                    tinymce.activeEditor.setProgressState(false);
                } else {
                    console.error(xhr.statusText);
                }
            };
            xhr.send(formData);
        };
        input.click();
    }
});

</script>
  
</body>
</html>

问题原因及修复方案 #

核心问题

1. 编辑器实例指向错误：tinymce.activeEditor可能无法正确绑定当前操作的编辑器——文件选择弹窗关闭后，TinyMCE的图片对话框才会重新获得焦点，导致进度状态设置时机错位。
2. 异常场景未处理：上传失败或中断时，没有关闭进度动画，会导致状态残留。

修改后的代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/<api-key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>

  <textarea>
    Welcome to TinyMCE!
  </textarea>

  <script>
  tinymce.init({
    selector: 'textarea',
    plugins: 'image code',
    toolbar: 'undo redo | link image | code',

    file_picker_callback: function(callback, value, meta) {
      const editor = this; // 直接获取当前编辑器实例，避免activeEditor指向偏差
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      
      input.onchange = function() {
        var file = this.files[0];

        // 开启进度动画
        editor.setProgressState(true);

        var formData = new FormData();
        formData.append('file', file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php');
        
        xhr.onload = function() {
          // 先关闭进度动画，再处理回调
          editor.setProgressState(false);
          if (xhr.status === 200) {
            var json = JSON.parse(xhr.responseText);
            callback(json.location);
          } else {
            console.error(xhr.statusText);
          }
        };
        
        // 处理上传错误
        xhr.onerror = function() {
          editor.setProgressState(false);
          console.error('上传失败');
        };
        
        // 处理上传中断
        xhr.onabort = function() {
          editor.setProgressState(false);
          console.log('上传已取消');
        };
        
        xhr.send(formData);
      };
      
      input.click();
    }
  });
  </script>
  
</body>
</html>

关键修改点

• 用this直接获取当前编辑器实例，替代tinymce.activeEditor，确保进度状态绑定到正确的操作对象。
• 在xhr.onload中优先关闭进度动画，再执行回调，避免动画延迟隐藏。
• 添加xhr.onerror和xhr.onabort事件处理，确保任何异常场景下都能关闭进度动画，防止状态残留。

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