用javascript複製富文本

時間 2019-11-26

原文原文鏈接

因爲項目需求，但願可以用javascript複製富文本格式的數據，例如全選一個網頁Ctrl+C, Ctrl+V到一個word文檔中，數據仍是原來的格式，顯示出來的樣子也都和原來同樣。如今但願使用javascript實現一樣的功能。javascript

因爲系統的限制，javascript往系統剪切板上放置的數據只有兩種格式Text和URL。具體使用以下：html

function CopyToClipBoard(){     
    var clipBoardContent="abcdefg";     
    window.clipboardData.setData("Text",clipBoardContent);     
    alert("已複製本頁連接,您可使用Ctrl+V粘貼後,發送給好友!");     
}

上述方式只能存放普通的文本，沒法保留原來的顏色字體大小等格式。java

想要複製指定對象，首先須要定位到目標對象，所幸javascript中能夠根據元素的id字段進行定位，能夠輕易獲取組成它的html文本，可是若是把這些html數據直接放入剪切板中，用Ctrl+V進行粘貼，咱們獲得的也只是沒有解析的html，不能展示有效數據。瀏覽器

在搜索了大量資料以後終於發現了一個好的方法，經過建立ControlRange，而後執行execCommand('Copy')命令將制定元素塊放到剪切板中, 此方法僅支持IE瀏覽器編輯器

<script>
function CopyImageToBoard(area){

  if (typeof area.contentEditable == 'undefined' || 

 !document.body.createControlRange){

    alert('Your IE does not support copy action, please use ctrl + c instead! 」');

  }else{

    var ctr = document.body.createControlRange();

    area.contentEditable = true;

    ctr.addElement(area);

    ctr.execCommand('Copy');

    area.contentEditable = false;

    alert('Copy success! ');
  }
}
</script>

<html>
<div id ="all">
<a href="javascript:void(0)"   onClick="CopyImageToBoard(document.getElementById('all'))" >copy to clipboard</a>
<table id="text">
  <tr style="background:red">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 <tr style="background:green">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 <tr style="background:black">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</html>

點擊連接按鈕以後會複製整個區域到系統剪切板，把數據粘貼到支持富文本格式的編輯器中如word等，就能夠看到效果了。字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。