在UIWebView中的contentEditable / designMode时自动滚动

Question

我正在为我正在处理的iPhone应用程序尝试一个富文本编辑器（具有HTML导出功能），并决定使用iOS 5的designMode支持contentEditable / designMode 。 我已经遇到了一个问题，这个问题正在打破我的需求。 在UIWebView中编辑内容时，没有自动滚动跟随光标，例如，在UITextView中。 键入时，光标在scrollView下继续，用户必须手动向上滚动。

这是一些相关的代码：

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *string = @"document.body.contentEditable=true;document.designMode='on';void(0)";
    [webView stringByEvaluatingJavaScriptFromString:string];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
}

有任何想法如何解决这个问题？ 我不确定这是否也出现在Safari中或仅在UIWebView的WebKit实现中。

如果您遇到此问题，请务必访问https://bugreport.apple.com并复制rdar：// 16455638 。

Answer 1

经过几个小时的研究，我发现了一个更好的解决方案，所以我想我会分享。

iOS 5的contentEditable实现中存在一个错误，其中主scrollView不会使用插入符号滚动。 如果使body标签（或任何动态大小的元素）contentEditable，则插入符将始终关闭屏幕。

如果你设置一个可编辑的div溢出：滚动，你会注意到div将滚动 。 div的滚动默认情况下不会“反弹”或滚动条，但您可以将-webkit-overflow-scrolling: touch属性应用于div来修复此问题。

有了这些信息，您可以使用包装器修复它，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css">
    html, body {height: 100%;}
    body {
        margin: 0;
    }
    #wrap {
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #editor {
        padding: 10px;
    }
</style>
</head>
<body>
<div id="wrap">
    <div id="editor" contenteditable="true">

    </div>
</div>
</body>
</html>

基本上你是滚动div而不是文档。

不幸的是，div的“scrollView”并不知道虚拟键盘，因此插入符号将在键盘后面消失。 但是，您会注意到插入位置仍位于键盘后面的屏幕上。 所以要解决这个问题，请减小div / UIWebView的高度以适应键盘。

您可能想要做的其他事情是禁用主scrollView上的滚动：

webView.scrollView.scrollEnabled = NO;

主scrollView不应该滚动，但它应该防止任何滚动故障。

Answer 2

为了回答我自己的问题，我们最终做了很多工作，以确保在多个iOS版本中正常工作。 我们发现所有滚动事件都是由于UIWebView试图管理其UIWebScrollView 。 我们决定使用内部UIWebDocumentView / UIWebBrowserView而不是使用UIWebView ，并将其添加到我们自己的滚动视图中。 这使我们能够管理内容大小并滚动自己并删除我们以前遇到的大部分问题。

Answer 3

首先你必须注册键盘通知，并在该keyboardWillShow方法中，触发一个0.1定时器间隔的滚动方法。

 -(void) keyboardWillShow:(NSNotification *)note
    {

        timer   =   [NSTimer    scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(scroll) userInfo:nil repeats:YES];

    }

    -(void) keyboardWillHide:(NSNotification *)note
    {
        [timer invalidate];

    }

在.h文件中创建一个成员变量，并在init（）方法中为其分配内存。

  NSString    *prevStr;

在滚动方法中，执行以下操作。

-(void)scroll{

    if (![prevStr isEqualToString:[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]]) {
        prevStr  =   [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"] retain];
        NSInteger height = [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"] intValue];
        NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(0, %d);", height];   
        [WebView stringByEvaluatingJavaScriptFromString:javascript];   
    }

}

这将允许您在编辑内容时滚动到底部，并且内容大于WebView框架。 而在其他时候，您将能够滚动到页面顶部（此时将保持自动滚动）。

Answer 4

我无法设置“溢出：滚动”的技巧，因为它搞砸了我们已经很好的CSS（如果我们在点击可编辑的div时更改了溢出，那么布局搞砸了）。 跟着这个：

$(this).on('keypress',function(e){
    //$(this) is the contenteditable div
    var lineHeight = parseInt($(this).css('line-height')) + 2;
    //gets the height of the div        
    newh=$(this).height();
    if (typeof oldh === 'undefined')
        oldh=newh;//saves the current height
    if(oldh!=newh)//checks if the height changes
    {
        //if height changes, scroll up by 1 line (plus a little 2 px)            
        window.scrollBy(0,lineHeight);
        oldh=newh;//resave the saved height since it changed
    }
});

希望这有助于某人。 PITA

Answer 5

您可以尝试通过一点点棘手的黑客获取插入框架并手动滚动到可见的rect。

// Call this after every change in editable HTML document
func bodyDidChanged() {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        let caretRect = self.caretRect(inView: self.webView)
        self.webView.scrollView.scrollRectToVisible(caretRect.insetBy(dx: -2, dy: -2), animated: true)
    }
}

private func caretRect(inView parentView: UIView? ) -> CGRect {
    guard let parentView = parentView else {
        return CGRect.null
    }

    var rect: CGRect?
    for view in parentView.subviews {
        if view.isKind(of: NSClassFromString("UITextSelectionView")!) {
            // If have a selected text, then we seeking last blue dot (grabber) inside rangeView
            var rangeView = view.subviews.first?.subviews.last
            if rangeView == nil {
                // If text not selected then carret frame is same as rangeView frame
                rangeView = view.subviews.first
            }
            rect = rangeView?.frame
            break
        } else {
            rect = caretRect(inView: view)
            if let rect = rect, !rect.isNull {
                break
            }
        }
    }
    return rect ?? CGRect.null
}

在UIWebView中的contentEditable / designMode时自动滚动

问题描述

5 个解决方案

解决方案1
11 2012-07-26 18:03:37

解决方案2
3 已采纳 2014-01-01 18:53:52

解决方案3
1 2011-12-22 14:19:12

解决方案4
0 2014-01-21 04:21:14

解决方案5
0 2018-03-21 12:40:40

在UIWebView中的contentEditable / designMode时自动滚动

问题描述

5 个解决方案

解决方案1 11 2012-07-26 18:03:37

解决方案2 3 已采纳 2014-01-01 18:53:52

解决方案3 1 2011-12-22 14:19:12

解决方案4 0 2014-01-21 04:21:14

解决方案5 0 2018-03-21 12:40:40

解决方案1
11 2012-07-26 18:03:37

解决方案2
3 已采纳 2014-01-01 18:53:52

解决方案3
1 2011-12-22 14:19:12

解决方案4
0 2014-01-21 04:21:14

解决方案5
0 2018-03-21 12:40:40