uni-app editor组件使用setContents设置内容后光标位置异常,不在输入内容的最后,而是在最前边
uni-app editor组件使用setContents设置内容后光标位置异常,不在输入内容的最后,而是在最前边
示例代码:
<editor id="editor" @ready="onEditorReady"></editor>
onEditorReady(){
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
})
}
//选择用户之后进行如下操作
let text = ''
let userName = '用户名称'
text += `<span> </span><span style="color: #245bdb;">@${userName}</span><span> </span>`
this.editorCtx.setContents({
html:text
})
操作步骤:
<editor id="editor" @ready="onEditorReady"></editor>
onEditorReady(){
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
})
}
//选择用户之后进行如下操作
let text = ''
let userName = '用户名称'
text += `<span> </span><span style="color: #245bdb;">@${userName}</span><span> </span>`
this.editorCtx.setContents({
html:text
})
预期结果:
- 光标应该在editor中的内容最后边
实际结果:
- 光标处于editor中的内容最前边
bug描述:
使用editor写@用户的功能,选择用户之后在editor里边插入这个@用户名称,这是后正常来说光标应该处于这个用户名称之后,但是这时候光标跑到了editor中内容的最前边,这样是不利于用户操作的
信息类型 | 信息内容 |
---|---|
产品分类 | uniapp/小程序/微信 |
PC开发环境 | Windows |
PC开发环境版本 | Windows 10 家庭中文版 |
开发工具类型 | 正式 |
开发工具版本 | 使用的是vscode |
第三方开发者工具 | 1.05.2110110 |
基础库版本 | 2.27.0 |
项目创建方式 | HBuilderX |
更多关于uni-app editor组件使用setContents设置内容后光标位置异常,不在输入内容的最后,而是在最前边的实战教程也可以访问 https://www.itying.com/category-93-b0.html
微信小程序设计如此,可以去微信小程序社区反馈
uniapp支持把vue语法的代码编译为小程序对应的文件
更多关于uni-app editor组件使用setContents设置内容后光标位置异常,不在输入内容的最后,而是在最前边的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题 app端也有,貌似也是没有处理,想使用setcontents进行文字回显后编辑,结果使用代码聚焦时候光标在最前面。
1.3.1 插入文本 往编辑器里增加格式化的内容是最常见的需求,Quill 针对该场景提供了非常丰富的 API,最基础的就是insertText()方法。 该方法既可以增加纯文本,又可以增加带格式的文本。 插入纯文本需要传入两个参数:
index 从哪个位置插入文本 text 插入什么文本
kotlin 代码解读复制代码this.quill.insertText(0, ‘Quill 是一款 API 驱动的富文本编辑器’);
插入带格式的文本需要额外传入两个参数:
format 格式的名字 value 格式的值
比如我想在当前光标后面插入一个带超链接的Quill: kotlin 代码解读复制代码const range = this.quill.getSelection(); if (range) { this.quill.insertText(range.index, ‘Quill’, ‘link’, ‘https://quilljs.com/’); }
作者:Kagol 链接:https://juejin.cn/post/7325979519478218752 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这个问题我也遇到了,20年的时候就有人在微信小程序社区反应bug了,现在好像都没有解决
2023年11月份了,该问题还是没有解决
24年了还是没有解决
24年11月了还没解决吗
遇到了一样的问题,请问解决了吗
大佬们,我也遇到了,咋搞?
我也遇到这个问题,不知道怎么解决
1.3.1 插入文本
往编辑器里增加格式化的内容是最常见的需求,Quill 针对该场景提供了非常丰富的 API,最基础的就是insertText()方法。
该方法既可以增加纯文本,又可以增加带格式的文本。
插入纯文本需要传入两个参数:
index 从哪个位置插入文本
text 插入什么文本
kotlin 代码解读复制代码this.quill.insertText(0, ‘Quill 是一款 API 驱动的富文本编辑器’);
插入带格式的文本需要额外传入两个参数:
format 格式的名字
value 格式的值
比如我想在当前光标后面插入一个带超链接的Quill:
kotlin 代码解读复制代码const range = this.quill.getSelection();
if (range) {
this.quill.insertText(range.index, ‘Quill’, ‘link’, ‘https://quilljs.com/’);
}
uniapp 源码写法写的这么死
case ‘insertText’:
{
range = quill.getSelection(true)
const { text = ‘’ } = options
quill.insertText(range.index, text, ‘user’) //this.quill.insertText(range.index, ‘Quill’, ‘link’, ‘https://quilljs.com/’);text只能传文本,格式都不能传有什么用
quill.setSelection(range.index + text.length, 0, ‘silent’)
}
break
文字设置完之后直接再调一次blur,整体逻辑还是通畅的
在uni-app中使用editor
组件时,如果遇到setContents
方法设置内容后光标位置异常的问题,这通常是由于编辑器状态未正确更新导致的。为了确保光标在内容设置后出现在输入内容的最后,可以通过编程方式手动调整光标位置。
以下是一个可能的解决方案,通过JavaScript结合uni-app的API来实现:
<template>
<view>
<editor
id="myEditor"
v-model="content"
@ready="onEditorReady"
:placeholder="placeholder"
/>
<button @click="setContent">设置内容</button>
</view>
</template>
<script>
export default {
data() {
return {
content: '',
placeholder: '请输入内容...'
};
},
methods: {
onEditorReady(e) {
this.editorCtx = e.editorCtx; // 获取编辑器的上下文
},
setContent() {
const newContent = '这是新设置的内容。';
this.content = newContent; // 更新v-model绑定的数据
this.$nextTick(() => {
// 设置内容后,通过 setSelection 方法将光标移动到内容末尾
this.editorCtx.setSelection({
start: newContent.length,
end: newContent.length
});
});
}
}
};
</script>
<style scoped>
/* 添加一些样式以便更好地展示 */
editor {
width: 100%;
height: 300px;
border: 1px solid #ccc;
}
button {
margin-top: 10px;
}
</style>
在这个示例中,我们做了以下几件事:
- 使用
v-model
绑定editor
组件的内容到组件的data
属性content
。 - 在
editor
组件的@ready
事件中获取编辑器的上下文editorCtx
。 - 定义一个
setContent
方法,该方法首先更新content
数据,然后通过$nextTick
确保DOM更新完成后,使用editorCtx.setSelection
方法将光标位置设置为新内容的末尾。
这种方法利用了Vue的响应式系统以及uni-app提供的编辑器上下文API,有效地解决了setContents
后光标位置异常的问题。注意,这里假设newContent
是一个字符串,因此光标位置是通过字符串长度来确定的。如果内容包含HTML标签,可能需要进一步处理来计算正确的光标位置。