带格式文本html 直接复制粘贴,通过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

这是段落主体内容,这里是加粗

";

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

};

},