1***@qq.com
1***@qq.com
  • 发布:2022-12-08 17:01
  • 更新:2024-12-26 15:42
  • 阅读:1703

【报Bug】editor组件使用setContents设置内容之后,光标不是在editor输入内容的最后,而是在内容的最前边

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 家庭中文版

HBuilderX类型: 正式

HBuilderX版本号: 使用的是vscode

第三方开发者工具版本号: 1.05.2110110

基础库版本号: 2.27.0

项目创建方式: HBuilderX

示例代码:

<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中内容的最前边,这样是不利于用户操作的

2022-12-08 17:01 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_WZF

DCloud_UNI_WZF

微信小程序设计如此,可以去微信小程序社区反馈
uniapp支持把vue语法的代码编译为小程序对应的文件

  • 3***@qq.com

    这个问题 app端也有,貌似也是没有处理,想使用setcontents进行文字回显后编辑,结果使用代码聚焦时候光标在最前面。

    2023-12-03 17:32

  • 6***@qq.com

    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

    来源:稀土掘金

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    2024-11-26 11:22

tank2015

tank2015

这个问题我也遇到了,20年的时候就有人在微信小程序社区反应bug了,现在好像都没有解决

顺小星

顺小星

2023年11月份了,该问题还是没有解决

HelloWord1955

HelloWord1955

24年了还是没有解决

6***@qq.com

6***@qq.com

24年11月了还没解决吗

6***@qq.com

6***@qq.com

bug真她妈多啊,辣鸡

r***@qq.com

r***@qq.com

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

1***@qq.com

1***@qq.com

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

  • 1***@qq.com

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

    2024-10-16 16:22

6***@qq.com

6***@qq.com

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

1***@qq.com

1***@qq.com

文字设置完之后直接再调一次blur,整体逻辑还是通畅的

要回复问题请先登录注册