Vue.js+Firebase集成TinyMCE5图片上传报错：Cannot read properties of undefined (reading 'then')

这个错误的核心原因是TinyMCE期望images_upload_handler返回一个Promise对象，但你的当前函数没有返回任何值，编辑器尝试调用返回值的then方法时，自然就会抛出"读取undefined的then属性"的错误。

虽然你的上传逻辑能成功拿到下载URL，但因为没返回Promise，TinyMCE的内部异步处理流程直接崩了，导致后续插入图片的步骤执行失败。

修复方案1：返回Promise链 #

直接把uploadBytes开始的整个Promise链返回出去就行，改动很小：

<Editor v-model="blogContent"
  api-key="----"
  :init="{
    toolbar_mode: 'fix',
    plugins: 'anchor autolink charmap codesample emoticons image imagetools link lists media searchreplace table visualblocks wordcount code textcolor fullscreen',
    toolbar: 'undo redo fullscreen | blocks fontfamily fontsize | bold italic underline | link image media table mergetags | forecolor align | checklist numlist bullist indent outdent | emoticons charmap | code |removeformat',
    images_upload_handler: function (blobInfo, success, failure) {
      const blob = blobInfo.blob();
      console.log('Blob Filename', blobInfo.filename())
      const blogImagestoragePath = `images/blogImages/${blobInfo.filename()}`;
      const blogImagestorageRef  = storageRef(storage, blogImagestoragePath); 
      console.log('Storage Ref:', blogImagestorageRef);

      // 关键：返回整个Promise链
      return uploadBytes(blogImagestorageRef, blob)
        .then((snapshot) => {
          console.log('Getting Download Url', snapshot)
          return getDownloadURL(blogImagestorageRef);
        })
        .then((downloadURL) => {
          console.log('Download URL:', downloadURL);
          if (downloadURL) {
            success(downloadURL);
            console.log('Passed URL to TinyMCE:', downloadURL);
          } else {
            failure('Cannot put the image in TinyMCE');
          }
        })
        // 捕获错误，调用failure告知编辑器上传失败
        .catch(err => {
          failure(`上传失败: ${err.message}`);
        })
    },
    menubar: false,
    statusbar: false,
    min_height: 500,
  }"
  output-format="html" skin='bootstrap' 
/>

修复方案2：改用async/await写法（更易读） #

如果习惯异步函数的写法，直接把handler改成async函数，TinyMCE会自动处理返回的Promise：

<Editor v-model="blogContent"
  api-key="----"
  :init="{
    toolbar_mode: 'fix',
    plugins: 'anchor autolink charmap codesample emoticons image imagetools link lists media searchreplace table visualblocks wordcount code textcolor fullscreen',
    toolbar: 'undo redo fullscreen | blocks fontfamily fontsize | bold italic underline | link image media table mergetags | forecolor align | checklist numlist bullist indent outdent | emoticons charmap | code |removeformat',
    images_upload_handler: async function (blobInfo, success, failure) {
      try {
        const blob = blobInfo.blob();
        console.log('Blob Filename', blobInfo.filename())
        const blogImagestoragePath = `images/blogImages/${blobInfo.filename()}`;
        const blogImagestorageRef  = storageRef(storage, blogImagestoragePath); 
        console.log('Storage Ref:', blogImagestorageRef);

        await uploadBytes(blogImagestorageRef, blob);
        const downloadURL = await getDownloadURL(blogImagestorageRef);
        
        console.log('Download URL:', downloadURL);
        if (downloadURL) {
          success(downloadURL);
          console.log('Passed URL to TinyMCE:', downloadURL);
        } else {
          failure('Cannot put the image in TinyMCE');
        }
      } catch (err) {
        failure(`上传失败: ${err.message}`);
      }
    },
    menubar: false,
    statusbar: false,
    min_height: 500,
  }"
  output-format="html" skin='bootstrap' 
/>

额外提醒 #

记得加上错误捕获逻辑，调用failure函数告知编辑器上传失败的情况，这样用户能看到更友好的错误提示，也方便你排查问题。

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