uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置

uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX
### 示例代码:


```javascript
onLoad() {
	const platform = uni.getSystemInfoSync().platform
	this.isIOS = platform === 'ios'
	const that = this
	this.updatePosition(0)
	let keyboardHeight = 0
	uni.onKeyboardHeightChange(res => {
		if (res.height === keyboardHeight) return
		const duration = res.height > 0 ? res.duration * 1000 : 0
		keyboardHeight = res.height
		setTimeout(() => {
			uni.pageScrollTo({
				scrollTop: 0,
				success() {
					that.updatePosition(keyboardHeight)
					that.editorCtx.scrollIntoView()
				}
			})
		}, duration)
},
updatePosition(keyboardHeight) {
	const toolbarHeight = 50
	const { windowHeight, platform } = uni.getSystemInfoSync()
	let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
	this.editorHeight = editorHeight
	this.keyboardHeight = keyboardHeight
},
onEditorReady() {
	const that = this
	uni.createSelectorQuery().select('#editor').context(function (res) {
		that.editorCtx = res.context
	}).exec()
},

操作步骤:

按照官网文档提供的原生解决ios上移问题 按照代码方式可复现

预期结果:

预期与官方原生demo一致

实际结果:

无法回退到光标位置


更多关于uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

解决了吗

更多关于uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2022都要完了。 这个问题多久可以解决一下呢。

2024此问题,ios依然存在

在uni-app小程序中使用editor.scrollIntoView()时,确实可能遇到无法准确回到光标位置的问题。这通常与键盘弹起时的页面滚动机制和编辑器内部焦点处理有关。

从你的代码来看,主要问题可能出现在:

  1. pageScrollTo到顶部后立即调用scrollIntoView,此时编辑器可能尚未完成布局更新
  2. 键盘高度变化时,编辑器内容区域重新计算需要时间

建议优化方案:

setTimeout(() => {
    uni.pageScrollTo({
        scrollTop: 0,
        success() {
            that.updatePosition(keyboardHeight)
            // 增加延迟确保布局更新完成
            setTimeout(() => {
                that.editorCtx.scrollIntoView()
            }, 100)
        }
    })
}, duration)

另外,可以尝试在调用scrollIntoView前先确保编辑器获得焦点:

that.editorCtx.focus().then(() => {
    that.editorCtx.scrollIntoView()
})
回到顶部