Automatisches scrollen, wenn contentEditable/designMode in einer UIWebView

Ich bin versucht, eine rich-text-editor (mit HTML-export-Funktion) für eine iPhone-Anwendung, mit der ich arbeite, und beschlossen, iOS 5, WebKit-Unterstützung für contentEditable/designMode.
Ich habe eine Wand schlagen mit einem Thema, das zu brechen, was ich brauche. Bei der Bearbeitung der Inhalte in der UIWebView, es gibt keine automatische scrollen, um den cursor Folgen, wie, zum Beispiel, in UITextView. Bei der Eingabe, der cursor geht weiter unter der scrollView und der Benutzer muss manuell nach oben scrollen.

Hier einige relevante code:

- (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];
}

Irgendwelche Ideen wie man das Problem beseitigen? Ich bin nicht sicher, ob dies tritt auch in Safari oder nur in UIWebView's WebKit-Implementierung.

Wenn du dieses problem, stellen Sie sicher, um den Kopf über https://bugreport.apple.com und doppelte rdar://16455638.

InformationsquelleAutor Leo Natan | 2011-12-15

11

Nach Stunden der recherche habe ich eine bessere Lösung gefunden, so dass ich dachte, ich würde Aktie.

Gibt es einen bug in iOS 5 ist contentEditable Umsetzung, wo die Haupt-scrollView nicht scrollen Sie mit dem Cursor. Wenn Sie den body-tag (oder dynamisch Größe element) contentEditable, das Einfügezeichen gehen immer off-screen.

Wenn Sie eine editierbare div overflow: scroll, werden Sie feststellen, dass das div scrollt. Die div ' s scrollen nicht "bounce" oder Bildlaufleisten standardmäßig, aber Sie können die -webkit-overflow-scrolling: touch - Attribut auf den div um dies zu beheben.

Mit diesen Informationen, können Sie befestigen es mit einem wrapper in etwa so:
```
<!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>
```
Grundsätzlich sind Sie scrollen der div anstelle des Dokuments.

Unfortuantly die div ' s "scrollView", ist sich nicht bewusst, dass die virtuelle Tastatur, so dass der Cursor verschwindet hinter der Tastatur. Sie werden jedoch feststellen, dass die caret-position ist immer noch auf dem Bildschirm an der Unterseite hinter der Tastatur. So, um das zu beheben, verringern Sie die Höhe des div - /UIWebView, um Platz für die Tastatur.

Etwas anderes möchten Sie vielleicht zu tun ist, deaktivieren Sie scrollen auf der Haupt-scrollView:
```
webView.scrollView.scrollEnabled = NO;
```
Den Haupt-scrollView sollte nicht scrollen sowieso, aber es sollte verhindern, dass jedes Blättern Störungen.
- Hallo Lukas, ich werde deine Antwort als die akzeptierte Antwort. Ich habe eigentlich versucht das selbst (sans -webkit-overflow-scrolling), aber es war immer noch etwas buggy-leider. Ich bin akzeptiert, weil es am nächsten ist, was, die ich brauchte in der Frage.
- Ich möchte hinzufügen, dass Sie nicht haben, um einen #wrap, können Sie wechseln alle, dass CSS auf den Körper, und das wird auch funktionieren.
- Tolle Lösung! Aber ich bemerkte ein kleines Problem - Wenn ich wählen (markieren) Sie ein Wort ein, und starten Sie scrollen die markierte Zustand bleibt auch beim scrollen und geht nur beim scrollen enden. Sowieso um diese zu überwinden?
- Und wie wollen Sie die Größe der webview dynamisch basierend auf dem Schlüssel drückt??
- Gibt es eine bessere Lösung für diese, wenn Sie auf iOS 7?
InformationsquelleAutor Luke
4

Beantwortung meiner eigenen Frage, der wir schließlich tun eine Menge Arbeit, um sicherzustellen, dass dieses korrekt funktioniert auf mehreren iOS-Versionen. Wir fanden heraus, dass alle scroll-Ereignisse wurden aufgrund der UIWebView versuchen, verwalten Ihre UIWebScrollView. Wir beschlossen, statt mit einem UIWebView, werden wir auf den internen UIWebDocumentView/UIWebBrowserView und fügen Sie es auf unsere eigene scroll-Ansicht. Dies erlaubt es uns, verwaltet den Inhalt, die Größe und das scrollen selbst und entfernt die meisten der Probleme, die wir bisher erlebt haben.
- Ich will erkunden Sie diese route, aber ich bin besorgt, weil das sind private Klassen, die ich denke (nicht wirklich dokumentierten). Haben Sie Probleme beim abschicken dieser app? Gibt es "sichere" Wege, dies zu tun und Dinge zu vermeiden? Wie haben Sie das erstellen einer UIWebView und dann reparent die Ansichten, vs erstellen von anderen Klassen direkt -- zu vermeiden, die app store-Ablehnung?
- Wir verwenden viele tricks, wie method swizzling, ISA-swizzling, etc. In diesem Fall ist es viel einfacher. Wir nehmen die Untersicht aus dem scroll-Ansicht, die in der öffentlichkeit ausgesetzt-API und fügen Sie es zu einem anderen scrollview, das ist unter unserer Kontrolle.
- können Sie code schreiben, für das gleiche?
- Sorry,, um tatsächlich code schreiben, denn das würde zuviel Zeit in Anspruch nehmen. Es ist nicht eine einfache Aufgabe.
InformationsquelleAutor Leo Natan
1

Zuerst müssen Sie sich registrieren Tastatur-Benachrichtigungen, und in diesem keyboardWillShow Methode, trigger scroll-Methode mit 0,1-timer ein.
```
 -(void) keyboardWillShow:(NSNotification *)note
    {

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

    }

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

    }
```
Stellen eine member-variable in der .h-Datei und Speicher es in der init () - Methode.
```
  NSString    *prevStr;
```
innen, die scroll-Methode, tun die folgende.
```
-(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];   
    }

}
```
Dies ermöglicht es Ihnen, Blättern Sie zu der Unterseite, wenn Sie die Bearbeitung der Inhalte und der Inhalte ist größer als die WebView-Rahmen. Und zu anderen Zeiten werden Sie in der Lage, Blättern Sie zu der oben auf der Seite(autoscroll gestellt werden, halten zu dieser Zeit).
- Hallo selvin, wäre das nicht, scrollen Sie in der webview auf der Unterseite? Dies ist nicht etwas, was ich brauchen, zu allen Zeiten. Zum Beispiel, wenn ich habe einen langen text, und ich Sie in die Mitte den text, der cursor sollte bleiben, wo ich geklickt, nicht ganz nach unten scrollen. Oder vielleicht verstehe ich das falsch?
- Hi @Leo. Leider weiß ich nicht wie das zu tun. Weil ich bin nicht in der Lage, um den aktuellen offset des scrollview, wenn Sie platzieren den cursor in der Mitte des Textes.Vielleicht sollten wir versuchen zu Holen Sie sich die aktuellen Inhalts-offset und, wenn es nicht in der Nähe der Unterseite, müssen wir halt den autoscroll.
InformationsquelleAutor Selvin

Konnte ich nicht auf den trick der Einstellung "overflow: scroll", da es versaut unsere bereits gute css (wenn änderten wir den überlauf, wenn Sie auf den bearbeitbaren div, dann das layout bekam, Durcheinander). Ging mit dieser:

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

Hoffe, das jemand hilft. PITA

InformationsquelleAutor Jamie Katz

Kann man versuchen, caret Rahmen mit wenig tricky hack und manuell scrollen sichtbar 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
}

InformationsquelleAutor Firuz Narzikulov

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.