Clipboard 剪贴板，一个基于Electron+react+antd构建的剪贴板小工具

最新推荐文章于 2024-03-05 09:36:09 发布
置顶 VIP文章 最新推荐文章于 2024-03-05 09:36:09 发布
阅读量1.5k 收藏 1
点赞数 3
分类专栏： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44555878/article/details/117147927
版权

Clipboard 剪贴板简介

简介

一个基于Electron+react+antd构建的剪贴板小工具

概述

  • 使用场景： 在我们使用word，excel，等编辑工具或者深度阅读文章的时候，每当需要复制一段文字并且记录下来，就要重复切换app或者窗口。或者是在复制繁杂的字段时，想要粘贴上上次甚至上上上次复制的内容，就需要再次找到那段文字，重新复制。使用Clipboard，它会帮你记录每次复制的内容。再次使用选中即可。

  • 技术背景：Electron桌面app开发

介绍

主界面

image-20210521111656111

主界面在屏幕下方显示

通过快捷键command+`快速显示/隐藏界面。显示界面后可以通过点击对应卡片复制内容，也可通过command+数字键 快速复制内容。

隐私

Clipboard 所记录的内容都将保存在本地，不会上传到服务器，所以您可以绝对放心您的数据只会让您自己看到。

系统架构

运行环境依赖

最低0.47元/天 解锁文章
草莓味的屁
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
在react中封装 clipboard剪贴板，使用超详细
m0_66288747的博客
08-30 570
我们开发的中，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。clipboard.js的作用就正好满足了我们的需求。
antd modal 拖动_如何给Modal之类的组件加上drag事件?
weixin_39997173的博客
01-17 465
import React from 'react';import Draggable from 'react-draggable';import { Button, Spin, Icon, message } from 'antd';import DialogBus from './dialog-bus'import '../styles/dialog.css'import Utils from ...
React Hook 用于读取和写入用户的剪贴板。
06-08
useClippy useClippy 是一个 TypeScript 友好的 React 钩子，用于读取和写入用户的剪贴板。 不要与 Microsoft Office 的助手 Clippy 混淆。 :paperclip: Demo 您可以通过托管演示目录的 GitHub Pages 看到 use-clippy 的运行情况。 安装 npm install use-clippy 或 yarn add use-clippy Use useClippy() 返回一个类似于 useState 的元组，其中第一项是剪贴板内容，第二项是设置剪贴板内容的函数。 从“React”导入React； 从'use-clippy'导入useClippy； export default function MyComponent() { // 剪贴板是用户剪贴板的内容。 // setClipboard('new value') 将设置用户剪贴板的内容。 const [剪贴板，setClipboard] = useClippy(); 返回 （
[Electron]中clipboard剪贴板
最新发布
qq_29069649的博客
03-05 345
Electron中clipboard剪贴板在系统剪贴板上执行复制和粘贴操作。
js复制文本的实现
weixin_46451295的博客
03-25 247
单纯js的实现 <button onClick={() => { this.copy(); }} > 复制 private copy(): void { const content = document.getElementsByClassName(‘page-new-link-src’)[0].innerHTML; navigator.clipboard.writeText(content); } 2. 结合antd的复制文本 import {Typography } from ...
VUE 复制内容至剪切板
热门推荐
pobu168的博客
07-12 3万+
复制内容至剪切板使用的是插件’vue-clipboard2’,通过官方文档会发现共有两种使用方式。 第一种方式与大多数文章类似，只粘贴代码： &lt;template&gt; &lt;div class="container"&gt; &lt;input type="text" v-model="message"&gt; &lt;button type="
完全征服React Native
08-22
React Native是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOS App，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。本课程采用新的ES6开发，主要内容包括ReactNative的基础知识，ReactNative的布局，组件，API，封装本地API和组件，发布ReactNative App，本地与ReactNative深度结合
electron当前版本可用的开源的文件路径剪贴板库 可以读取写入图片 electron-clipboard-ex
kisshd的博客
01-05 1366
续上次发的《那些玩electron遇到的坑和解决方案》中提到的复制文件路径，在寻找了一年多了后终于在 别人的软件中挖到可用的库了(15.3 – 16.5)实测可用 在此之前为了实现这个功能可以说是大显神通… 有调用cmd的有调用powershell的也有实时编译C#的… 也有大佬出了相关模块但是总是编译失败！！！！，这个功能也是老大难了， 还有另一个老大难模块(robotjs)在这里抛转引玉看有没有大佬给个编译好了的electron高版本让我移植下 1.安装(需编译) 也可以下载下方我已编译好了写好申
拓展Electron的剪切板
未思
12-01 997
拓展Electron的剪切板 A better clipboard for Electron (NodeJS). Install npm i better-clipboard electron-rebuild -f -w better-clipboard Usage import { betterClipboard } from 'better-clipboard'; betterClipboard.readFilePathList(); // get the path of file which i
Electron中使用clipboard模块实现复制粘贴功能
越陌度阡
04-26 4435
软件开发中复制粘贴是一种比较常见的功能，如复制微信号引导用户粘贴去搜索关注，还有常见的复制图片进行粘贴。 Electron中的clipboard模块就是用来实现这些功能的，该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等，以下是代码实现。 主进程文件main.js代码如下： // main.js const { app, BrowserWindow } = require("electron"); const path = require("path"); const createWi
React中监听粘贴事件并获取粘贴板中的截图
Divine0的博客
04-28 2179
JSX中在点击组件时添加监听粘贴事件 useEffect(()=>{ //给组件添加监听粘贴事件 pasteImageRef.current?.addEventListener('paste', pasteHandler); },[]); <div tabIndex={-1} // 设置tabIndex才可以聚焦 ref={pasteImageRef} > <span>Ctrl+V 粘贴截图</span> </div> 从粘贴板获取
Clipboard-manager-electron：使用Electron构建的剪贴板管理器
02-04
剪贴板经理电子 用Electron构建的剪贴板管理器 预览视窗 预览Linux Ubuntu 19.10 预览MacOS 图标很大，这是错误的。 帮助我解决问题＃21 捷径（BETA） 现在我们有了一些快捷方式，但是它处于beta状态。 测试并给我反馈，谢谢！ CmdOrCtrl+Shift+0复制位置1上的项目 CmdOrCtrl+Shift+1复制位置2上的项目 CmdOrCtrl+Shift+2 2〜复制位置3上的项目 CmdOrCtrl+Shift+3复制位置4上的项目 CmdOrCtrl+Shift+4复制位置＃5上的项目 CmdOrCtrl+Shift+5复制位置6上的项
electron-clipboard-demo:在macOS或Windows中读取剪贴板文件路径的演示
05-12
电子剪贴板演示 在macOS或Windows中读取剪贴板文件路径的演示 使用 # Clone this repository git clone https://github.com/njzydark/electron-clipboard-demo # Go into the repository cd electron-clipboard-demo # Install dependencies npm install # Run the app npm start 它是如何工作的 在本期，主要的解决方案已包括在内，有些使用c模块，有些使用read Api。 在这里，我总结了如何使用read Api来读取剪贴板中的文件路径并支持多个文件 苹果系统 单个文件路径 clipboard . read ( 'public.file-url' ) 多文件路径 clipboard . read (
Hamsin Clipboard 剪贴板辅助工具 v3.03官方版
12-26
基本简介　HamsinClipboard是一个系统的剪贴板工具。十分小巧，只有40K大小。它可以记录下最近的10次剪贴的纪录，方便你随时的调用。它的用户界面很简洁，使用也很方便，你可以在任何时候通过自己设定的
剪贴板++「Clipboard++」-crx插件
03-22
Z]：撤消上一个选择[Ctrl + Shift + Z]：取消突出显示整个页面[Ctrl + /]：启用/禁用页面[Ctrl +左/右箭头]：更改突出显示颜色按住Ctrl并单击一个句子将突出显示该句子并将其放置在剪贴板中。 选择文本并将其复制也...
React复制到剪贴板的示例代码
08-29
本篇文章主要介绍了React复制到剪贴板的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react复制内容到剪贴板
马优晨
05-25 1万+
这里只讲一个react的实现方式，我们使用react-copy-to-clipboard 首先安装 react-copy-to-clipboard npm install –save react react-copy-to-clipboard 或者 cnpm install –save react react-copy-to-clipboard 或者 yarn add re...
React 实现 antd中Table单击获取内容
下雨不愁的博客
11-15 9125
&lt;Table columns={columns} dataSource={data} size="middle" onRow = {(record) =&gt; { return { onClick: () =&gt; { console.log(record) }) } } }} /&g...
React使用Clipboard插件
qq_36279799的博客
08-30 313
React使用Clipboard插件
chrome 获取剪贴板内容_Chrome 开发者工具的 11 个高级使用技巧
05-25
获取剪贴板内容可以使用 Chrome 开发者工具中的 Console 面板来实现。 在 Console 面板中输入以下 JavaScript 代码： ```javascript navigator.clipboard.readText() .then(text => console.log('剪贴板内容为：'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值