使用wangeditor展示内容,复制内容并保留格式

1,671 阅读1分钟

需求:展示使用wangeditor编辑的内容,并一键复制功能并保留原格式

1.使用的是wangeditor自带的获取文本功能 editor.txt.text();使用clipboard插件,可以复制任何内容; editor.txt.text()获取的内容有 要把他们去掉 clipboard(editor.txt.text().replace(/ /,' ') 该方法复制的内容没有保留原格式; 2.使用pre标签 可以实现保留原格式的复制

 <div class="copy-button" @click="onCopy">
        复制
 </div>
 <pre class="preText" v-html="editorContent"></pre>
methods:{
 onCopy(){
        // // this.$clipboard(this.editor.txt.text().replace(/&nbsp;/g,'  '));
         var text = document.getElementsByClassName('preText')[0].innerText;   
        this.copyText(text)
    },
   copyText(text) {
        var tag = document.createElement('textarea');
        var elementID = "cp_hgz_input";
        tag.setAttribute('id', elementID);
        tag.value = text;
        // document.getElementById('main-content').appendChild(tag);
        document.body.appendChild(tag);
        document.getElementById(elementID).select();
        document.execCommand('copy');
        document.getElementById(elementID).remove();
    }
}