uni-app editor 调用setContents方法后鼠标位置仍在最前面

发布于 1周前 作者 eggper 来自 Uni-App

uni-app editor 调用setContents方法后鼠标位置仍在最前面

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Microsoft Windows版本 23H2(0S 内部版本 22631.4317)
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 12
手机厂商 OPPO
手机机型 oppo a97
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

selectUser(user) {  
    this.editorCtx.getContents({  
        success:(res) =>{  
            console.log(res.delta)  
            res.delta.ops.splice(res.delta.ops.length - 1, 0, {  
                    "attributes": {  
                        "color": "red",  
                    },  
                    "insert": `@${user.username} `  
                });  
            this.editorCtx.setContents({  
              delta: res.delta  
            });  
        }  
    })  
}

操作步骤：

  1. 点击优质评论可上头条
  2. 在弹出框中点击@
  3. 选择用户

预期结果：

调用setContents方法之后鼠标在最后

实际结果：

调用setContents方法之后鼠标还是在最前面

bug描述：

editor 调用setContents方法之后鼠标还是在最前面

img img


Harmonyos Next教程
1 回复

在uni-app中，如果你在使用富文本编辑器（如u-editor或类似的组件）并调用setContents方法设置内容后，发现光标（鼠标位置）仍然位于文本的最前面，这通常是因为编辑器没有正确处理光标位置的重置。为了解决这个问题，你可以在调用setContents方法后立即将光标移动到内容的末尾。

以下是一个基于JavaScript和uni-app框架的示例代码，展示了如何在设置编辑器内容后调整光标位置。这里假设你使用的是一个支持基本API调用的富文本编辑器组件。

// 假设你已经在页面或组件中引入了编辑器组件，并有一个ref引用指向它
<template>
  <view>
    <u-editor ref="myEditor" :content="editorContent" @ready="onEditorReady" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '<p>初始内容</p>',
    };
  },
  methods: {
    onEditorReady() {
      this.$nextTick(() => {
        // 调用setContents方法设置新内容
        this.$refs.myEditor.setContents('<p>新内容</p><p>更多内容</p>');
        
        // 设置完内容后，将光标移动到末尾
        this.moveCursorToEnd();
      });
    },
    moveCursorToEnd() {
      const editor = this.$refs.myEditor;
      // 这里假设编辑器有一个获取内容DOM的方法，例如getContentDom
      const contentDom = editor.getContentDom();
      if (contentDom) {
        // 获取最后一个子元素的末尾位置
        const lastChild = contentDom.lastChild;
        if (lastChild) {
          const range = document.createRange();
          range.setStartAfter(lastChild);
          range.setEndAfter(lastChild);
          
          // 这里假设编辑器有一个设置选择范围的方法，例如setSelectionRange
          const selection = window.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }
    },
  },
};
</script>

注意：

  1. 上述代码中的getContentDom和setSelectionRange是假设的方法名，实际使用时需要根据你使用的编辑器组件的API文档进行调整。
  2. 如果编辑器组件不支持直接操作DOM或选择范围，你可能需要查找该组件提供的特定方法来处理光标位置。
  3. 在某些情况下，编辑器可能需要一段时间来处理setContents的调用，因此使用$nextTick来确保内容已经设置完成后再移动光标。

确保在实际应用中根据编辑器组件的具体API和功能进行调整。

回到顶部