🎯 文本选择工具栏

选中页面上的任意文本,体验自定义工具栏功能

📖 示例文本区域

JavaScript 是一种广泛使用的编程语言,主要用于网页开发。它可以让你实现丰富的交互效果。Vue.jsReact 是目前最流行的两个前端框架。

在这个示例中,你可以选中任意文本,上方的工具栏会显示内置功能和自定义按钮。尝试选中一段文字,点击不同的按钮查看效果!

工具栏支持智能定位——当选择区域靠近页面边缘时,会自动调整位置以确保完整显示。这是一个非常实用的功能,可以提升用户体验。

💻 编程使用示例

// 创建工具栏实例 const toolbar = new TextSelectionToolbar({ container: '#demo-text' // 监听区域 }); // 注册自定义按钮 toolbar.registerButton({ id: 'my-btn', icon: '🔍', title: '搜索', action: (selection) => { console.log('选中文本:', selection.text); } }); // 注册带分隔线的按钮组 toolbar.registerButtonGroup([ { id: 'copy', icon: '📋', title: '复制', action: ... }, { divider: true }, { id: 'share', icon: '📤', title: '分享', action: ... } ]); // 销毁工具栏 toolbar.destroy();