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

20 回复

微信小程序设计如此,可以去微信小程序社区反馈 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月了还没解决吗

bug真她妈多啊,辣鸡

遇到了一样的问题,请问解决了吗

大佬们,我也遇到了,咋搞?

我也遇到这个问题,不知道怎么解决

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>

在这个示例中,我们做了以下几件事:

  1. 使用v-model绑定editor组件的内容到组件的data属性content
  2. editor组件的@ready事件中获取编辑器的上下文editorCtx
  3. 定义一个setContent方法,该方法首先更新content数据,然后通过$nextTick确保DOM更新完成后,使用editorCtx.setSelection方法将光标位置设置为新内容的末尾。

这种方法利用了Vue的响应式系统以及uni-app提供的编辑器上下文API,有效地解决了setContents后光标位置异常的问题。注意,这里假设newContent是一个字符串,因此光标位置是通过字符串长度来确定的。如果内容包含HTML标签,可能需要进一步处理来计算正确的光标位置。

回到顶部