TinyMCE在iOS（Safari）上无法上传图片

Question

我已经使用 images_upload_url 参数在 TinyMCE 上启用了图片上传功能。大多数浏览器都可以正常使用，但在 iOS 的 Safari 上无法使用。

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

我首先注意到的是，在上传标签页中，“浏览图片”按钮位于文件输入上方（文件输入的不透明度为零），而且文件输入的点击事件没有被触发。此外，TinyMCE对文件输入的事件处理程序似乎防止Safari打开文件选择对话框。

是否还有其他人遇到过这个问题，并且有解决方法吗？

- C.Aline

---

嘿，你找到解决文件输入点击未被触发的问题了吗？ - dazzed

Answer 1

我意识到这是一个过时的问题，但我会把它留在这里，以便任何需要使用TinyMCE 4而不启用移动功能的人可以使用。

iOS Safari不会在非可点击元素上绑定单击事件。 MDN Web Docs 提供了很好的解释。TinyMCE使用div元素来触发单击事件（从查看源代码中得知）。

因此，您需要自己向按钮元素添加touchend事件处理程序。您还需要钩入编辑器上的dialog OpenWindow和CloseWindow事件，以便您可以添加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设置不同，请参阅其文档））。

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
});

- Christopher Smith

---

谢谢第一段代码，解决了我在WordPress主题中使用前端编辑器上传图片的难题。之前，在iOS上，唯一响应按钮的方法是点击1像素边框。 - cogdog