在UIWebView上的contenteditable div上选择文本会导致滚动抖动/抖动

时间:2019-02-20 08:26:33

标签: uiwebview wkwebview contenteditable

问题描述:

UIWebView上,我有一个内容可编辑的DIV区域,给定用户使用大文本(几段长)。用户尝试通过选择最后一个单词,然后尝试向上移动选择光标来选择最后一个段落。当选择到达屏幕顶部时,屏幕将不会继续向上滚动,而是开始抖动。

环境:

XCode 10.1 迅捷4.2 iOS 12.1.4 iPod(PKH42TA / A)

快捷代码:

class WebViewVC: UIViewController, KeyboardEventsHandleable {
weak var editroView: UIWebView!
  override func loadView() {
    let webView = UIWebView(frame: CGRect.zero)
    editroView = webView
    editroView.scrollView.contentInsetAdjustmentBehavior = .never
    view = editroView
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    registerKeyboardNotifications()
    let path = Bundle.main.path(forResource: "expeditor", ofType: "html")!
    let url = URL(fileURLWithPath: path)
    let htmlContent = try! String(contentsOf: url)
    editroView.loadHTMLString(htmlContent, baseURL: nil)

  }

  @objc func keyboardWillShow(notification: Notification) {   
    guard let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else {
      return
    }

    editroView.scrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: keyboardSize.height, right: 0)

  }

  @objc func keyboardWillHide(notification: Notification) {
    editroView.scrollView.contentInset = UIEdgeInsets.zero
  }


}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0" />

    <style type="text/css">
      * {
        outline: 0px solid transparent;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-touch-callout: none;
      }  
    html, body {
      padding: 10px 0;
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
    }
    html {
      height: 100%;
    }

    body {
      font-size: 48px;
      line-height: 1.35;
      padding: 10px;
      min-height: 100%;
    }
    </style>


  </head>
  <body>
    <div id="editor" contenteditable="true">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo a diam sollicitudin. Sit amet cursus sit amet. Lorem mollis aliquam ut porttitor leo a diam. Vel pharetra vel turpis nunc eget. Egestas erat imperdiet sed euismod nisi porta lorem. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Ipsum consequat nisl vel pretium lectus quam id leo. Imperdiet sed euismod nisi porta lorem mollis. Mollis nunc sed id semper risus in hendrerit gravida. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Ultricies mi quis hendrerit dolor magna. Tincidunt dui ut ornare lectus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Phasellus faucibus scelerisque eleifend donec pretium. Nisi est sit amet facilisis magna etiam tempor. Elit scelerisque mauris pellentesque pulvinar. Mi eget mauris pharetra et ultrices neque.

      Nunc faucibus a pellentesque sit amet porttitor eget dolor. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Scelerisque varius morbi enim nunc. Et molestie ac feugiat sed. Fermentum odio eu feugiat pretium nibh ipsum. Fames ac turpis egestas sed tempus. Porttitor leo a diam sollicitudin tempor. Rhoncus mattis rhoncus urna neque viverra. Sit amet est placerat in. Nibh ipsum consequat nisl vel pretium lectus quam. Sed blandit libero volutpat sed cras. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Lectus urna duis convallis convallis tellus. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Quis auctor elit sed vulputate.

      Aliquam faucibus purus in massa. Porttitor rhoncus dolor purus non enim praesent elementum. Urna nunc id cursus metus aliquam eleifend mi in. Fames ac turpis egestas maecenas pharetra. Sit amet consectetur adipiscing elit. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Sed turpis tincidunt id aliquet risus feugiat in ante metus. Urna duis convallis convallis tellus. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Suspendisse ultrices gravida dictum fusce. Maecenas ultricies mi eget mauris pharetra et ultrices.

      Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Et tortor consequat id porta nibh venenatis. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Sit amet tellus cras adipiscing enim eu turpis egestas. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Sed cras ornare arcu dui vivamus arcu felis bibendum. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Imperdiet dui accumsan sit amet.

      Metus dictum at tempor commodo ullamcorper. Eu non diam phasellus vestibulum. Magna fermentum iaculis eu non diam phasellus. Ac turpis egestas integer eget. Dignissim suspendisse in est ante in nibh. Sed velit dignissim sodales ut eu sem. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vestibulum morbi blandit cursus risus at ultrices mi. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Eget nunc lobortis mattis aliquam faucibus purus. Egestas pretium aenean pharetra magna ac placerat.
    </div>
  </body>
</html>

我已经尝试使用WKWebView进行测试,但是在使用UIWebView时没有遇到我遇到的问题。但是,我需要使用UIWebView,这是因为此问题来自使用ZSSRichTextEditor的名为UIWebView的第三方模块,并且可能需要很长时间才能尝试将模块迁移到{{1} }。

可以在此处找到摇动/摇动滚动的视频: https://github.com/nnhubbard/ZSSRichTextEditor/issues/212

要点可以在这里找到: https://gist.github.com/ctwdtw/0f4b55c0f9c107ebb7b2725aef41f0ba

0 个答案:

没有答案