选中页面上的任意文本,体验自定义工具栏功能
JavaScript 是一种广泛使用的编程语言,主要用于网页开发。它可以让你实现丰富的交互效果。Vue.js 和 React 是目前最流行的两个前端框架。
在这个示例中,你可以选中任意文本,上方的工具栏会显示内置功能和自定义按钮。尝试选中一段文字,点击不同的按钮查看效果!
工具栏支持智能定位——当选择区域靠近页面边缘时,会自动调整位置以确保完整显示。这是一个非常实用的功能,可以提升用户体验。
// 创建工具栏实例
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();