Question

在iframe中使用TinyMCE时，我在iOS上遇到了一个非常奇怪的问题。假设我们有一个包含多个textareas的表单，每个包含TinyMCE编辑器。现在我们想在第三个textarea插入一些东西，所以我们要向下滚动一下。一旦我们在textarea中输入键盘，该站点就会自动跳回到页面顶部。根据我们之前滚动的距离，textarea可能会被推出视口。因此，你无法看到你输入的东西，这显然是一个巨大的UX红旗。

这只发生在iOS上，在iframe中使用TinyMCE时; Android运行正常。默认情况下，TinyMCE还在iframe中实现其编辑器。所以基本上我们在iframe中有一个iframe，可能会在iOS上引起一些问题。

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

可以使用 this fiddle 测试此现象。

iframe的代码只不过是：

text.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch (View v, MotionEvent event) {
                ...
                String id= v.getResources().getResourceName(v.getId());
            }

        });

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

Answer 1

我没有IOS来测试它，但你可以试着看看代码是否有用......

它只是试图在init hook

上专注于控制..

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

Answer 2

我也有这个问题，更糟糕的是因为整个tinyMCE页面在iOS上的本机应用程序的WebView中运行。问题是，当在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）设备上执行此操作。

希望有所帮助！

Answer 3

如果同时使用引导程序，则可能会出现问题。如果您同时使用引导程序和tinymce（即以相同的形式使用），则引导程序将取代焦点。因此，只需从该表单的所有输入元素中删除表单控件。然后，它将起作用。

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

3 个答案: