uni-app 使用 editor 组件中的 getSelectorText 方法无法获取到选中的内容
uni-app 使用 editor 组件中的 getSelectorText 方法无法获取到选中的内容
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境版本号 | 10.0.22631.1830 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.96 |
| 第三方开发者工具版本号 | 1.06.2401020 |
| 基础库版本号 | 3.2.4 |
| 项目创建方式 | HBuilderX |
示例代码：
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<!-- <text class="title">{{title}}</text> -->
<!-- 这里用focus也不行 -->
<editor id="editor" @ready="onEditorReady" @tap="onEditorFocus" placeholder="再次输入"></editor>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// title: 'Hello',
editorCtx: null
}
},
onLoad() {
},
methods: {
onEditorReady(){
let that = this
this.$nextTick(()=>{
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
console.log(res.context);
that.editorCtx = res.context
}).exec()
setTimeout(()=>{
this.editorCtx.setContents({
html: ""
})
},1000)
})
},
onEditorFocus(){
this.onselectText()
},
onselectText(){
let that = this
this.editorCtx.getSelectionText({
success(res){
console.log(res,"选中的内容");
that.selectText = res.text
},
fail(fail){
console.log(fail)
}
})
},
}
}
</script>
操作步骤：
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<!-- <text class="title">{{title}}</text> -->
<!-- 这里用focus也不行 -->
<editor id="editor" @ready="onEditorReady" @tap="onEditorFocus" placeholder="再次输入"></editor>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// title: 'Hello',
editorCtx: null
}
},
onLoad() {
},
methods: {
onEditorReady(){
let that = this
this.$nextTick(()=>{
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
console.log(res.context);
that.editorCtx = res.context
}).exec()
setTimeout(()=>{
this.editorCtx.setContents({
html: ""
})
},1000)
})
},
onEditorFocus(){
this.onselectText()
},
onselectText(){
let that = this
this.editorCtx.getSelectionText({
success(res){
console.log(res,"选中的内容");
that.selectText = res.text
},
fail(fail){
console.log(fail)
}
})
},
}
}
</script>
预期结果：
{
"errMsg": "ok",
"text":"选择"
}
实际结果：
{
"errMsg": "ok",
"text":""
}
bug描述：
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<!-- <text class="title">{{title}}</text> -->
<!-- 这里用focus也不行 -->
<editor id="editor" @ready="onEditorReady" @tap="onEditorFocus" placeholder="再次输入"></editor>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// title: 'Hello',
editorCtx: null
}
},
onLoad() {
},
methods: {
onEditorReady(){
let that = this
this.$nextTick(()=>{
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
console.log(res.context);
that.editorCtx = res.context
}).exec()
setTimeout(()=>{
this.editorCtx.setContents({
html: ""
})
},1000)
})
},
onEditorFocus(){
this.onselectText()
},
onselectText(){
let that = this
this.editorCtx.getSelectionText({
success(res){
console.log(res,"选中的内容");
that.selectText = res.text
},
fail(fail){
console.log(fail)
}
})
},
}
}
</script>
使用最小实例代码选择内容时 微信开发者工具正常 手机真机无法获取选中内容 使用 editor 组件的 getSelectionText
更多关于uni-app 使用 editor 组件中的 getSelectorText 方法无法获取到选中的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
在原生小程序中测试下是否正常，如有问题，请向微信社区反馈。
更多关于uni-app 使用 editor 组件中的 getSelectorText 方法无法获取到选中的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中，editor 组件提供了 getSelectionText 方法来获取编辑器中的选中内容。如果你无法通过 getSelectionText 方法获取到选中的内容，可能是以下几个原因导致的：
1. 方法调用时机不正确
getSelectionText 方法需要在用户已经选中内容之后调用。如果你在用户未选中内容或选中内容之前调用该方法，可能会返回空字符串。
解决方案： 确保在用户选中内容后再调用 getSelectionText 方法。例如，可以在 @selectionchange 事件中调用该方法。
<template>
<editor id="editor" @selectionchange="onSelectionChange"></editor>
</template>
<script>
export default {
methods: {
onSelectionChange() {
const editorContext = uni.createSelectorQuery().select('#editor').context();
editorContext.getSelectionText({
success: (res) => {
console.log('选中的内容:', res.text);
},
fail: (err) => {
console.error('获取选中内容失败:', err);
}
});
}
}
};
</script>
2. editor 组件未正确初始化
如果 editor 组件未正确初始化或未绑定到正确的上下文，getSelectionText 方法可能无法正常工作。
解决方案： 确保 editor 组件已经正确初始化，并且绑定了正确的上下文。
<template>
<editor id="editor"></editor>
<button @click="getSelectedText">获取选中内容</button>
</template>
<script>
export default {
methods: {
getSelectedText() {
const editorContext = uni.createSelectorQuery().select('#editor').context();
editorContext.getSelectionText({
success: (res) => {
console.log('选中的内容:', res.text);
},
fail: (err) => {
console.error('获取选中内容失败:', err);
}
});
}
}
};
</script>