uniapp 富文本editor 如何保留光标在最后面

在使用uniapp的富文本editor组件时，如何在插入内容后保持光标始终停留在文本最后？尝试了setContents和insertDiv等方法，光标总是跳回开头，有没有办法解决这个问题？

2 回复

在uniapp的editor组件中，可以使用editorContext.setContents()设置内容后，再调用editorContext.scrollIntoView()将光标滚动到底部。或者通过editorContext.insertText()在末尾插入内容来保持光标位置。


在 UniApp 中使用富文本编辑器（如 <editor> 组件）时，要保留光标在最后面，可以通过以下方法实现：

核心思路

通过 JavaScript 操作，在内容更新后，将光标移动到文本末尾。

实现步骤

  1. 获取编辑器实例：使用 editorContext 方法。
  2. 获取内容高度：通过 getContents 或计算内容高度。
  3. 设置光标位置：使用 setSelection 方法，将光标设置在文本末尾。

示例代码

// 在页面或组件中
export default {
  data() {
    return {
      editorCtx: null,
      content: ''
    }
  },
  onEditorReady() {
    // 获取编辑器实例
    uni.createSelectorQuery().select('#editor').context((res) => {
      this.editorCtx = res.context
      // 初始化后设置光标到末尾（可选）
      this.keepCursorAtEnd()
    }).exec()
  },
  methods: {
    // 保持光标在最后
    keepCursorAtEnd() {
      if (!this.editorCtx) return
      
      // 获取内容
      this.editorCtx.getContents({
        success: (res) => {
          const content = res.html || res.text || ''
          const length = content.length
          
          // 设置光标到末尾
          this.editorCtx.setSelection({
            index: length,
            success: () => {
              console.log('光标已移动到末尾')
            }
          })
        }
      })
    },
    
    // 在需要时调用，例如内容更新后
    onContentChange() {
      // 可以在此处添加防抖处理
      this.$nextTick(() => {
        this.keepCursorAtEnd()
      })
    }
  }
}

注意事项

  1. 防抖处理：内容频繁更新时，建议添加防抖（如 300ms），避免性能问题。
  2. 异步操作：编辑器方法多为异步，确保在成功回调中操作。
  3. 平台差异：不同平台（小程序/H5）可能略有差异，需测试验证。

使用场景

  • 动态插入内容后保持光标位置
  • 表单自动填充后聚焦到末尾
  • 聊天输入框保持输入状态

通过以上方法，即可实现在 UniApp 富文本编辑器中保持光标在最后位置。

回到顶部