js复制富文本、超链接,粘贴后链接支持点击跳转,保留富文本颜色换行格式

Demo功能点

  • js复制富文本，粘贴后保留富文本的格式
  • js复制超链接，粘贴后链接支持点击
  • clipboard.js demo 示例 教程
  • clipboard.js 复制富文本 在线测试
  • clipboard.js 复制带颜色、字体字号斜体、带格式的富文本

请测试Demo

复制之后，粘贴到word文档中，你会发现 超链接是可以点击的，红色的富文本格式是能保留的

点击 复制按钮 后，以下内容会被测试到粘贴板

demo完整代码

<button class="copyBtn" data-clipboard-target="#copyLink">复制超链接和富文本</button>
<small>复制之后，粘贴到word文档中，你会发现
  <strong>超链接是可以点击的，红色的富文本格式是能保留的</strong>
</small>
<br>
<br>

<div>
  <strong>点击 复制按钮 后，以下内容会被测试到粘贴板</strong>
  <div style="border: 1px solid #ccc;">
    <div id="copyLink">
      <p>富文本 <span style="color: red;">red</span></p>
      <small>带格式的文本</small>
      <div>超链接 <a href="./">js copy link and rich text content to clipboard</a></div>
      <em>带格式的文本</em>
    </div>
  </div>
</div>

<!-- <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script> -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.copyBtn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
  setTimeout(function(){
    alert('复制成功，请粘贴到word文档或其他富文本编辑器中')
  }, 50);
});
</script>

Demo 使用到的 js 开源库、版本号

https://github.com/zenorocha/clipboard.js/
https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js

  npm 方式使用
    "clipboard": "2.0.11"

    import ClipboardJS from 'clipboard';
    new ClipboardJS('.copyBtn');