Quill编辑器链接验证异常：编辑已有链接无法更新且报错

你遇到的两个核心问题：

• 编辑已有链接时，修改后的合法链接无法替换原链接
• 再次点击链接触发TypeError: l.position is not a function错误

根源在于上下文绑定错误和编辑模式下的选区范围未正确处理：

1. handleLink绑定到了toolbar模块，导致函数内的this指向混乱，this.editor实际是toolbar而非Quill实例
2. 编辑已有链接时，没有正确捕获并保存当前链接的选区范围，导致formatText无法定位到要修改的链接
3. 重复绑定tooltip.save会覆盖Quill内部的必要状态逻辑

以下是修正后的核心代码，关键改动已标注：

...
this.editor = new Quill(this.$refs.editor, quillSettings)
// 1. 修正handleLink的绑定上下文，绑定到组件实例而非toolbar
this.editor.getModule('toolbar').handlers.link = this.handleLink.bind(this)
// 2. 初始化时只绑定一次tooltip.save，避免重复覆盖
this.editor.theme.tooltip.save = this.validateAndSaveLink.bind(this)
// 新增：用于保存编辑已有链接时的选区范围
this.linkRange = null
...

/**
 * 验证链接格式并保存
 */
validateAndSaveLink() {
  const tooltip = this.editor.theme.tooltip
  const linkInput = tooltip.root.querySelector('input[data-link]')
  const { value } = linkInput
  const isLinkMode = tooltip.root.getAttribute('data-mode') === 'link'

  if (isLinkMode) {
    if (!this.URL_REGEX.test(value)) {
      alert('Please enter a valid URL.')
      return
    }

    const { scrollTop } = this.editor.root
    this.editor.focus()

    // 3. 区分新增链接和编辑已有链接的场景
    if (this.linkRange) {
      // 编辑已有链接：用保存的选区范围更新格式
      this.editor.formatText(this.linkRange, 'link', value, 'user')
      // 重置选区范围
      this.linkRange = null
    } else {
      // 新增链接：直接应用格式
      this.editor.format('link', value, 'user')
    }

    this.editor.root.scrollTop = scrollTop
  }

  // 4. 保留tooltip默认的清理逻辑
  linkInput.value = ''
  tooltip.hide()
},

/**
 * 处理工具栏链接按钮的点击逻辑
 */
handleLink(value) {
  const quill = this.editor
  if (!value) {
    quill.format('link', false)
    return
  }

  const range = quill.getSelection()
  if (!range || range.length === 0) {
    return
  }

  const preview = quill.getText(range)
  const { tooltip } = quill.theme

  // 5. 编辑已有链接时，保存当前选区范围
  const currentFormat = quill.getFormat(range)
  if (currentFormat.link) {
    this.linkRange = range
  }

  // 调用tooltip的编辑方法
  tooltip.edit('link', preview)
},

1. 修正上下文绑定：把handleLink绑定到组件实例，确保this.editor始终指向正确的Quill实例，避免上下文混乱
2. 一次性绑定tooltip.save：初始化时只绑定一次，避免每次点击工具栏按钮都覆盖save方法，破坏Quill内部逻辑
3. 捕获编辑模式的选区：点击已有链接时，通过quill.getFormat(range)判断当前是否是链接，保存选区到this.linkRange，确保更新时能定位到目标链接
4. 区分新增/编辑场景：在validateAndSaveLink里根据this.linkRange是否存在，分别处理新增链接和编辑已有链接的逻辑，确保格式更新正确

这样修改后，编辑已有链接时能正确替换为新的合法链接，也不会再触发l.position is not a function的错误。

内容的提问来源于stack exchange，提问作者TreyCollier