首页 > 建站教程 > JS、jQ、TS >  js实现选中并复制富文本内的带样式的内容正文

js实现选中并复制富文本内的带样式的内容

我爱模板网要实现将下面的富文本内容点击按钮进行自动复制,并且能将样式也一起复制了,粘贴到word或其他富文本背景色等不丢失:

js实现选中并复制富文本内的带样式的内容


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、复制效果:

js实现选中并复制富文本内的带样式的内容


2、粘贴到富文本效果:

js实现选中并复制富文本内的带样式的内容


3、粘贴到word效果:

js实现选中并复制富文本内的带样式的内容