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元素来触发点击事件(通过查看源代码(。

因此，您需要自己向按钮元素添加触摸端事件处理程序。 您还需要挂接到编辑器上的对话框 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
});