需求:展示使用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(/ /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();
}
}