ios - 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 在绑定(bind)到不可点击元素的点击事件上表现不佳。 MDN Web Docs给出了很好的解释。TinyMCE 使用 div 元素触发点击事件(通过查看源代码)。

所以需要自己给button元素添加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
});