在可通过角度编辑的div内容中找到字符中的插入符位置

Question

我在使用contenteditable属性在div内获取光标插入符位置时遇到一些麻烦。

实际上，我正在使用以下功能：

  onBlurArea (field, ev) {
    ev.preventDefault()
    const editable = ev.target.childNodes[1].childNodes[2]
    this.positions[field] = {start: this.getCaretCharacterOffsetWithin(editable), editable}
  }

  getCaretCharacterOffsetWithin (element) {
    let ie = (typeof this.doc.selection != 'undefined' && this.doc.selection.type != 'Control') && true
    let w3 = (typeof this.win.getSelection != 'undefined') && true
    let caretOffset = 0
    if (w3) {
      let range = this.win.getSelection().getRangeAt(0)
      console.log(range)
      let preCaretRange = range.cloneRange()
      preCaretRange.selectNodeContents(element)
      preCaretRange.setEnd(range.endContainer, range.endOffset)
      console.log(preCaretRange)
      caretOffset = preCaretRange.toString().length
      console.log(caretOffset)
    }
    else if (ie) {
      let textRange = this.doc.selection.createRange()
      let preCaretTextRange = this.doc.body.createTextRange()
      preCaretTextRange.expand(element)
      preCaretTextRange.setEndPoint('EndToEnd', textRange)
      caretOffset = preCaretTextRange.text.length
    }
    return caretOffset
  }

当我模糊文本角度字段时，会触发onBlurArea函数：

<text-angular ng-model="moduleManage.currentModule.description" required ng-blur="moduleManage.onBlurArea('description', $event)"></text-angular>

此外：

this.doc = $document
this.win = $window

• 我需要获取光标位置，以添加一些不受库管理的外部内容。

• 我的问题是，当我模糊我的视野时，如果我专注于一个精确的视野或另一个视野，则我的carretOffset是不同的。

• 上面的函数总是给我0

• 当我记录范围时，我总是有一个div项目完全超出了我当前的焦点，甚至超出了文本角度模块

编辑：我认为我的问题在以下行上：

let range = this.win.getSelection().getRangeAt(0)

那给了我一点我都不懂的东西...

Answer 1

触发blur事件时，您已经失去了焦点并创建了范围。

为了在div失去焦点之前获得插入记号偏移，我建议您在每次更改插入记号时都保存它。 就是说，每次启动keyup或mouseup或您想更新其他任何定时时，都对其进行更新。

检查这个笨蛋

顺便说一句，在这个插件中，我使用了getCaretCharacterOffsetWithin函数来计算偏移量。 但是此功能可能无法正常工作。 它将在内容中添加一些空白，并且插入标记的偏移量大于真实值。