如何在可满足的DIV中检测光标位置并在该位置插入文本

Question

我正在使用咖啡脚本，我正在尝试在Cursor位置插入内容可编辑Div的文本。我正在使用Tim Dowan功能来获得光标位置。每次键入DIV光标位置中的某些内容都会发生变化，但我不确定如何在UpdateTextarea函数中更新变量，运行该功能时，我会获得相同的光标位置。有更好的方法吗？

# Get curret position in Content Editable div
getSelectionCharacterOffsetWithin = (element) ->
  start = 0
  end = 0
  doc = element.ownerDocument or element.document
  win = doc.defaultView or doc.parentWindow
  sel = undefined
  if typeof win.getSelection != 'undefined'
    sel = win.getSelection()
    if sel.rangeCount > 0
      range = win.getSelection().getRangeAt(0)
      preCaretRange = range.cloneRange()
      preCaretRange.selectNodeContents element
      preCaretRange.setEnd range.startContainer, range.startOffset
      start = preCaretRange.toString().length
      preCaretRange.setEnd range.endContainer, range.endOffset
      end = preCaretRange.toString().length
  else if (sel = doc.selection) and sel.type != 'Control'
    textRange = sel.createRange()
    preCaretTextRange = doc.body.createTextRange()
    preCaretTextRange.moveToElementText element
    preCaretTextRange.setEndPoint 'EndToStart', textRange
    start = preCaretTextRange.text.length
    preCaretTextRange.setEndPoint 'EndToEnd', textRange
    end = preCaretTextRange.text.length
  {
    start: start
    end: end
  }
$(document).on 'input', '.reply-area', (e) ->
    currentElement = e.target
    reportSelection = (element) ->
      selOffsets = getSelectionCharacterOffsetWithin(element)
      return selOffsets.start
    currentCursorPosition = reportSelection(currentElement)
    updateTextArea = (element) ->
      # Get clicked user email
      thread_user_email = element.querySelector('.thread-user-email').textContent
      # Get element
      elementToInsert = $(currentElement).html()
      # Cursor position, email to insert, Text before cursor and text after cursor
      splitIndex = currentCursorPosition
      sliceIndex = currentCursorPosition - 1
      sliceString = elementToInsert.slice(sliceIndex, splitIndex)
      beforeString = elementToInsert.substring(0, sliceIndex)
      afterString = elementToInsert.substring(splitIndex)
      emailToInsert = '+' + thread_user_email + ' '     
      # Updated reply, comment text
      $(currentElement).html(beforeString + emailToInsert + afterString)
      # Hide the list
      $(thread_users_list).hide()
    $('.thread-users-list li').click (e) ->
        e.stopImmediatePropagation()
        updateTextArea(this)

Answer 1

尽管没有看到您要改变的HTML，但很难猜测，我可以看到您的代码的一些小问题。

在CoffeeScript中，您的功能的凹痕很重要，因此您要确保一切都正确排列。其次，您应该能够创建一个窗口级var来存储光标位置，然后可以在代码中的任何地方访问该位置。这是您的代码的更新版本，它在本地为我工作，并有一些评论内联：

window.currentCursorPosition = null
# Get curret position in Content Editable div
getSelectionCharacterOffsetWithin = (element) ->
  ...
  ...
# You can simplify this quite a bit
$(document).on 'input', '.reply-area', (e) ->
  window.currentCursorPosition = getSelectionCharacterOffsetWithin(e.target).start
# Make sure this is not indented below $(document) code
updateTextArea = (element) ->
  ...
  ...
# Make sure this is not indented below $(document) code
$('.thread-users-list li').click (e) ->
    e.stopImmediatePropagation()
    updateTextArea(this)