TinyMCE 图像上传在 iOS (Safari) 上不起作用

Question

我已使用 images_upload_url 参数在 TinyMCE 上启用图像上传。这在大多数浏览器中都可以正常工作，但在 iOS 中的 Safari 上不起作用。

tinymce.init({
  images_upload_url: '/uploadImage'
  automatic_uploads: true
});

首先，我注意到上传选项卡上的“浏览图片”按钮位于文件输入的顶部（不透明度为零）；并且文件输入点击事件没有被触发。此外，TinyMCE 的文件输入事件处理程序似乎阻止了 Safari 打开文件选择对话框。

有没有其他人看到过这个问题，是否有解决方法？

Answer 1

我知道这是一个过时的问题，但如果他们的要求是使用不启用移动设备的 TinyMCE 4，我会将其留给任何需要它的人。

iOS Safari 在点击事件绑定在不可点击元素上时表现不佳。 MDN Web Docs 给出了很好的解释。 TinyMCE 使用 div 元素触发点击事件（通过查看源代码）。

所以你需要自己为按钮元素添加一个 touchend 事件处理程序。 您还需要挂钩到编辑器上的dialog OpenWindow and CloseWindow events，以便您可以添加 touchend 事件并进行清理。

tinyMCE.init({
      selector: selector,
      plugins: "paste,link,image",
      toolbar: "undo redo | bold italic underline | link image",
      file_picker_types: 'image',
      images_upload_handler: image_upload_handler,
      automatic_uploads: true,
      setup : function(editor){
           editor.on('OpenWindow', function(e){
                $('.mce-browsebutton button').on('touchend', function(event) {
                    $(this).click(); 
                });
            });
            editor.on('CloseWindow', function(e){
                 $('.mce-browsebutton button').off('touchend');
            });
         }        
    });

否则您可以使用移动模式（请注意，这是针对 TinyMCE 4（v5 设置不同，请参阅他们的docs）

tinyMCE.init({
    selector: selector,
    mobile: {
      theme: 'mobile'
    },
    plugins: "paste,link,image",
    toolbar: "undo redo | bold italic underline | link image",
    file_picker_types: 'image',
    images_upload_handler: image_upload_handler,
    automatic_uploads: true
});