通过JS将带格式的文本复制到剪贴版的两种方法

场景:富文本中排版好的文字,需要复制到剪贴板,并确保粘贴到word和其他的富文本的时候样式保持不变。

方法一:富文本编辑器中,选择区域,然后执行

  let editor = document.getElementById('element');//要复制的结点

  let range = document.createRange();

  window.getSelection().removeAllRanges();//先清除掉选中区域

  range.selectNode(editor);

  window.getSelection().addRange(range);

  let res = document.execCommand("copy");

  window.getSelection().removeAllRanges();

方法二:通过监听copy事件,将带有Html文本样式写入剪贴版中

  let article = "<h1>你好,这是H1</h1><p style='color:red'>这是段落主体内容,<b>这里是加粗</b></p>";

  let copyHandler = this.copy(article)

  document.addEventListener('copy',copyHandler);

  document.execCommand('copy');

  removeEventListener('copy',copyHandler);


 function copy(article) {

  return function(event) {

    event.clipboardData.setData("text/html", article);//设置格式text/html

    event.preventDefault();

  };

},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。