TinyMCE编辑器图片上传按钮不显示问题求助

你的核心问题是自定义了file_picker_callback但未实现上传逻辑——这个回调会替换TinyMCE默认的文件选择/上传界面，导致原生上传按钮被隐藏。下面提供两种解决方案：

方案1：移除自定义file_picker_callback（最简单） #

如果你不需要自定义文件选择逻辑，直接删除file_picker_callback配置即可。TinyMCE会自动显示默认的上传按钮，配合你已配置的images_upload_url就能正常使用上传功能。

修改后的配置代码：

<script>
  tinymce.init({
    selector: '#content',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    images_upload_url: 'postAcceptor.php'
  });
  
  tinymce.activeEditor.uploadImages(function(success) {
    $.post('ajax/post.php', tinymce.activeEditor.getContent()).done(function() {
      console.log("Uploaded images and posted content as an ajax request.");
    });
  });
</script>

方案2：保留file_picker_callback并实现上传逻辑 #

如果需要自定义文件选择器（比如对接自己的文件管理系统），需要在回调中实现文件选择和上传的完整逻辑：

<script>
  tinymce.init({
    selector: '#content',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    images_upload_url: 'postAcceptor.php',
    file_picker_callback: (callback, value, meta) => {
      // 仅处理图片类型
      if (meta.filetype === 'image') {
        // 创建原生文件选择输入框
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';

        input.onchange = () => {
          const file = input.files[0];
          // 构建FormData上传文件到服务器
          const formData = new FormData();
          formData.append('file', file);

          // 上传文件到你的后端接口
          fetch('postAcceptor.php', {
            method: 'POST',
            body: formData
          })
          .then(res => res.json())
          .then(data => {
            // 将服务器返回的图片URL传给TinyMCE
            callback(data.location, { alt: file.name });
          });
        };

        // 触发文件选择框
        input.click();
      }
      // 如需处理文件/媒体类型，可添加对应逻辑
    }
  });
  
  tinymce.activeEditor.uploadImages(function(success) {
    $.post('ajax/post.php', tinymce.activeEditor.getContent()).done(function() {
      console.log("Uploaded images and posted content as an ajax request.");
    });
  });
</script>

说明 #

• 方案1适用于大多数普通场景，无需额外代码即可恢复默认上传功能。
• 方案2需要你的后端接口postAcceptor.php能接收并处理文件上传，返回包含图片URL的JSON数据（比如{"location": "/uploads/xxx.jpg"}）。

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