我爱模板网要实现将下面的富文本内容点击按钮进行自动复制,并且能将样式也一起复制了,粘贴到word或其他富文本背景色等不丢失:
js实现复制,常常用textarea作为媒介,将内容放进去:
<button onclick='doCopy()'>点击复制</button> function doCopy(){ let copyInput = document.createElement('input');//创建input元素 document.body.appendChild(copyInput);//向页面底部追加输入框 copyInput.setAttribute('value', '这里放的是要复制的内容');//添加属性,将url赋值给input元素的value属性 copyInput.select();//选择input元素 document.execCommand("Copy");//执行复制命令 this.$message.success("链接已复制!");//弹出提示信息,不同组件可能存在写法不同 //复制之后再删除元素,否则无法成功赋值 copyInput.remove();//删除动态创建的节点 }
这种复制有个致命缺陷,如果是富文本,将内容放进textarea的时候,样式全部丢失,而如果直接将富文本的内容,以innerHTML的形式放进textarea,粘贴的时候,全是标签。可以采用下面的方式:选中富文本的内容->执行复制,再粘贴到word或其他空的富文本,就没问题了,样式完美保留:
<button onclick='doCopy()'>点击复制</button> function doCopy(){ // 要复制的富文本div const contentDom = document.querySelector('.w-e-text-container [role=textarea]') var selection = window.getSelection() var range = document.createRange() range.selectNodeContents(contentDom) selection.removeAllRanges() selection.addRange(range) setTimeout(() => { document.execCommand('Copy') }, 50) }
此外,这个被复制的div,要有contenteditable=true属性,否则复制出来没有样式。
效果展示:
1、复制效果:
2、粘贴到富文本效果:
3、粘贴到word效果: