在Ionic中选中文本时如何触发事件并实现高亮及文本存储功能？

因为Ionic应用上层运行在WebView中，你之前网页版基于TinyQ实现的高亮核心逻辑可以直接复用，只需要额外适配Android端文本选择菜单的自定义逻辑即可，具体实现步骤如下：

实现方式一：兼容原生菜单（Android端原生体验） #

• 安装Capacitor上下文菜单插件，在插件配置中新增「高亮」自定义选项，设置仅当用户选中文本时显示该选项
• 监听自定义菜单的点击事件，触发时调用Web侧的文本选择获取逻辑，拿到选中内容、对应DOM位置等参数
• 调用你已有的TinyQ高亮方法，给选中文本添加高亮样式，同时将选中文本存入指定变量/本地存储供后续使用

实现方式二：纯前端实现（跨端通用，无需修改原生配置） #

• 禁用WebView默认的上下文菜单，自行监听selectionchange事件，用户选中文本时弹出自定义的「高亮」悬浮按钮，样式可对齐原生菜单
• 核心逻辑参考代码示例：

// 监听文本选择变化
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection?.toString().length) {
    this.showHighlightBtn = true;
    this.currSelection = selection;
  } else {
    this.showHighlightBtn = false;
  }
});

// 高亮按钮点击处理
handleHighlightClick() {
  // 存储选中文本
  const selectedText = this.currSelection.toString();
  this.highlightStorage.push(selectedText);
  // 复用原有TinyQ高亮逻辑
  // TinyQ.highlight(this.currSelection);
}

注意事项 #

• 若使用原生菜单方案，需要在Android项目的AndroidManifest.xml中补充上下文菜单声明，避免自定义选项被系统默认菜单覆盖
• 高亮标签需要保留user-select: text属性，保证高亮后的文本可被再次选中编辑
• 存储高亮信息时建议绑定对应笔记ID、文本偏移位置，避免多笔记场景下高亮位置错乱

内容的提问来源于stack exchange，提问作者Sadaf Shafi