TinyMCE：网站在iOS上的键盘输入上跳回顶部

在iOS中使用TinyMCE时，我有一个非常奇怪的问题。假设我们有一个包含多个textareas的表单，每个表单都包含TinyMCE编辑器。现在我们要在第三个textarea中插入一些东西，所以我们必须向下滚动一下。一旦我们在textarea中进行键盘输入，网站会自动跳回到页面的顶部。根据我们早些时候滚动的距离，textarea可能会被推出视口。因此你看不到你打字的内容，这显然是一个巨大的用户体验红旗。TinyMCE：网站在iOS上的键盘输入上跳回顶部

只有在iframe中使用TinyMCE时才会发生这种情况; Android工作正常。默认情况下，TinyMCE也在iframe中实现其编辑器。所以基本上我们在iframe中有一个iframe，可能会在iOS上导致一些问题。

不幸的是，删除iframe不是一种选择。 textareas也必须保留，所以使用TinyMCE的内联选项是不可能的（afaik）。

该现象可以用this fiddle进行测试。

代码的iframe什么比这更：

<head> 
    <script type="text/javascript"> 
    tinymce.init({ 
     selector: "textarea" 
    }); 
    </script> 
</head> 
<body> 
    <form method="post"> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
    </form> 
</body>

我非常感谢所有的答案，可能的解决方案，因为我已经江郎才尽。我怀疑它与我的Javascript或CSS有关（因为在这个例子中没有），但我想/希望它可以用CSS修复。我只是不知道如何:)

来源

2015-04-23 Dirk

您是否能够解决此问题？我遇到同样的问题，并想知道你是否能够解决它。 –

我没有IOS测试它在我的结束，但你可以尝试看看，如果这个代码和平有助于..

它只是试图获得焦点在控制..上的init挂钩

tinymce.init({ 
    init_instance_callback: function(e) { 
     tinymce.activeEditor.focus(); 
     // e.execCommand('mceAutoResize'); 
    } 
});

来源

2015-04-23 09:31:04

我有这个问题太，甚至更糟，因为整个TinyMCE的页面是在iOS本机应用程序的网页视图内运行。问题是，在tinyMCE iFrame中键入或点击时，它会失去焦点并跳回到页面的顶部。以下是我如何修复它：

初始化您的tinyMCE实例时，您应该定义一个设置函数。在内部，请执行以下操作：

editor.on('postRender', function(event) { 
    var target = event.target; 
    if (!target || !target.contentWindow || !target.contentWindow.focus || typeof target.contentWindow.focus !== 'function') { 
    return false; 
    } 

    var refocus = function() { 
    target.contentWindow.focus(); 
    }; 

    target.contentDocument.addEventListener('keydown', refocus); 
    target.contentDocument.addEventListener('touchstart', refocus); 
    target.contentDocument.addEventListener('touchend', refocus); 
});

它做的是重新关注每个按键和触摸事件上的内容帧。请确保仅在移动设备（iOS）上执行此操作。

希望有帮助！

来源

2015-10-29 10:29:05

TinyMCE：网站在iOS上的键盘输入上跳回顶部

回答

相关问题