uni-app app双端，如何实现长按选中文字出现复制粘贴按钮

css的user-select: text，和text组件的selectable的属性。。 都不足以完成我的需求，如今就是要自己做一个。。 请问有现成的插件吗？或是思路？

在uni-app中实现长按选中文字出现复制粘贴按钮，可以利用uni-app自带的富文本组件rich-text和一些自定义样式及事件处理来完成。以下是一个简化的代码示例，展示了如何在H5和App端实现这个功能。

步骤

1. 使用rich-text组件： rich-text组件用于显示富文本内容，支持HTML标签。

2. 自定义长按事件： 使用touchstart、touchmove和touchend事件来判断长按行为。

3. 显示复制粘贴按钮： 在检测到长按后，显示自定义的复制粘贴按钮。

4. 实现复制粘贴功能： 使用浏览器的execCommand方法（注意：此方法在部分现代浏览器中已被废弃，但在uni-app的App端和部分H5环境中仍然有效）。

代码示例

<template>
  <view class="container">
    <rich-text nodes="{{htmlNodes}}" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></rich-text>
    <view v-if="isLongPress" class="copy-paste-buttons">
      <button @click="copyText">复制</button>
      <button @click="pasteText">粘贴</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlNodes: [{ name: 'p', children: [{ type: 'text', text: '这是一段可以长按复制的文字' }] }],
      isLongPress: false,
      longPressTimer: null,
      longPressThreshold: 500, // 长按时间阈值，单位ms
    };
  },
  methods: {
    onTouchStart() {
      this.longPressTimer = setTimeout(() => {
        this.isLongPress = true;
      }, this.longPressThreshold);
    },
    onTouchMove() {
      clearTimeout(this.longPressTimer);
    },
    onTouchEnd() {
      clearTimeout(this.longPressTimer);
      if (this.isLongPress) {
        // 这里可以添加获取选中文本的逻辑，但uni-app的rich-text组件不直接支持
        // 可以考虑使用web-view组件加载HTML页面并处理
        this.isLongPress = false;
      }
    },
    copyText() {
      // 获取选中的文本（这部分逻辑需要自行实现，因为uni-app的rich-text不直接支持）
      const selectedText = '选中的文本'; // 示例
      if (selectedText) {
        document.execCommand('copy');
        uni.showToast({ title: '复制成功' });
      }
    },
    pasteText() {
      const pastedText = document.execCommand('paste');
      uni.showToast({ title: '粘贴内容：' + pastedText });
    }
  }
};
</script>

<style>
.container {
  position: relative;
}
.copy-paste-buttons {
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
}
button {
  display: block;
  margin-bottom: 5px;
}
</style>

注意：上述示例中，复制粘贴的具体文本获取逻辑需要自行实现，因为rich-text组件不直接支持获取选中的文本。在实际应用中，可以考虑使用web-view组件加载一个包含所需功能的HTML页面，或者寻找第三方插件来实现更高级的文本选择和处理功能。