Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

复制按钮的需求 #787

Open
zjcnew opened this issue Apr 13, 2022 · 4 comments
Open

复制按钮的需求 #787

zjcnew opened this issue Apr 13, 2022 · 4 comments

Comments

@zjcnew
Copy link

zjcnew commented Apr 13, 2022

怎样实现在markdown代码块中出现复制按钮,实现代码的一键复制,如下效果
企业微信截图_20220413105229

@wienerxu
Copy link

代码段中增加拷贝按钮的一般做法,都是前端实现的,不必经过后台:
1、在文章加载后执行一段脚本,把所有article-body增加一个pre元素,就是动态增加一个copy的按钮;
2、这个动态增加的按钮,因为是附加在代码段的前面,可以通过引入ClipboardJS库,实现target函数,其中trigger参数的nextElementSibling就是代码段的文本区,这样就可以实现把代码段中的内容拷贝到剪贴板了。
3、再增加一下样式,鼠标进入代码段时显示这个copy按钮,移出时隐藏copy按钮;

@zjcnew
Copy link
Author

zjcnew commented Jun 9, 2022

代码段中增加拷贝按钮的一般做法,都是前端实现的,不必经过后台: 1、在文章加载后执行一段脚本,把所有article-body增加一个pre元素,就是动态增加一个copy的按钮; 2、这个动态增加的按钮,因为是附加在代码段的前面,可以通过引入ClipboardJS库,实现target函数,其中trigger参数的nextElementSibling就是代码段的文本区,这样就可以实现把代码段中的内容拷贝到剪贴板了。 3、再增加一下样式,鼠标进入代码段时显示这个copy按钮,移出时隐藏copy按钮;

能提交一个补丁版本吗,我没有代码基础

@zengxiaochao
Copy link

请问现在有这个一键复制的实现方案了吗

@focusos
Copy link

focusos commented Nov 9, 2022

同求此功能,谢谢大佬们!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants