通过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();

  };

},