首页 uniapp的editor组件如何获取光标位置

uniapp的editor组件如何获取光标位置

时间: 2025-03-21 12:00:34 浏览: 75

在 UniApp 中，`<editor>` 组件用于富文本编辑功能。如果需要获取当前光标的位置，可以借助 `context` 对象提供的 API 实现。以下是具体的步骤： ### 获取光标位置的方式 1. **初始化 editor** 首先通过 `createSelectorQuery()` 获得 `<editor>` 的上下文 (`context`)。 2. **使用 getSelection() 方法** - 使用 `context.getEditorContext().getSelection()` 来获取当前的选区信息。 - 返回值包含两个关键字段：`range.start` 和 `range.end`，分别表示选区起始点和结束点的位置。如果没有选择内容，则这两个值相等，代表光标的当前位置。 #### 示例代码： ```js // 引入必要的API import { createSelectorQuery } from 'uni'; export default { data() { return { editorCtx: null // 存储editor实例 } }, methods: { // 初始化editor并绑定到this.editorCtx initEditor() { const query = uni.createSelectorQuery(); query.select('#editor').context((res) => { this.editorCtx = res.context; }).exec(); if (this.editorCtx) { console.log('已成功加载editor'); } }, // 点击按钮触发获取光标位置的操作 getCursorPosition() { if (!this.editorCtx) { console.error('尚未初始化editor'); return; } this.editorCtx.getSelection() .then(res => { let position = res.range ? res.range.start : -1; // 光标位置或-1（未找到） console.log(`当前光标位置为 ${position}`); }) .catch(err => { console.error('获取光标失败:', err); }); } }, mounted() { this.initEditor(); // 页面挂载完成后初始化editor } } ``` --- ### 注意事项 1. 必须等到 `<editor>` 完全渲染完成后再初始化其 context。 2. 如果页面上存在多处动态更新内容的情况，请小心处理状态同步问题，避免影响用户体验。

阅读全文