JQuery - 粘貼事件，剝離富文本

Question

我有一個contentEditable字段，我想要執行以下操作。當用戶將豐富的文本粘貼到字段中時（微軟單詞或其他），我想刪除所有富文本，但保留換行符。

我的想法是：如果將富文本粘貼到純文本<texarea>中，它將刪除所有格式並保留中斷（由顯式新行以及塊級元素創建）。我想以某種方式模擬這一點。換句話說，創建一個臨時textarea，攔截粘貼事件，將其應用到Textarea，檢索結果，並將它們插回原始的「內容編輯」字段中。

但是，我還沒有找到一種方法來模擬此。如果我通過jquery將內容粘貼到textarea中，它似乎會復原所有富文本格式，當我嘗試從那裏複製它時，回到原始字段

Answer 1

您可以實現類似這樣的事情，而不需要textarea處理內容中的代碼時，每當其值發生更改時都可編輯div，並刪除除段落和換行符之外的所有標籤。

的想法將是每一個div中內容的變化（聽input事件）時間：

• 在內HTML替換所有</p>和<br>非HTML標記（如：[p]和[br]）。
• 刪除所有的HTML標籤（你可以用.text()做）
• 裝回用於其等效令牌（和它們的開口！）
• 裹一切<p>和</p>之間。

這裏一個簡單的演示：

$("#editable").on("input", function() { 
 

 
    $this = $(this); 
 

 
    // replace all br and closing p tags with special tokens 
 
    $this.html($this.html().replace(/\<\/p\>/g,"[p]").replace(/\<br\>/g,"[br]")); 
 

 
    // remove all the tags, and then replace the tokens for their original values 
 
    $this.html("<p>" + $this.text().replace(/\[p\]/g, "</p><p>").replace(/\[br\]/g,"<br>") + "</p>"); 
 

 
});

div#editable, div#demo { 
 
    border:1px solid gray; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div contenteditable="true" id="editable"></div> 
 

 
<h3>Demo</h3> 
 
<p>Copy this code and paste it on the editable div above:</p> 
 
<div id="demo"> 
 
    <p>This <b>is</b> <i>a</i> styled paragraph.</p> 
 
    <p>&nbsp;</p> 
 
    <p>The <span style="font-weight:bold">above paragraph</span> is empty.</p> 
 
    <p>And this is a new paragraph…<br>with a line break!</p> 
 
</div>

你也可以看到它運行在這樣的jsfiddle：http://jsfiddle.net/v5rae96w/

我試着用MS Word和HTML，它這個解決方案工作正常。但它有一個問題：它只與p和br（與MS Word和其他文字處理器很好地配合）進行換行。如果用戶複製HTML如div（或其他導致換行符的塊元素），則它不會很好地工作。如果您需要與所有塊元素斷開連接，則此解決方案可能需要進行一些更改。

---

爲了解決這個問題，你可以用p（或div或你想要的元素）替換所有的塊標記，通過指示它的正則表達式：

$this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/div\>)/gi,"[p]") 

正如你所看到的在這裏：

$("#editable").on("input", function() { 
 
    
 
    $this = $(this); 
 

 
    // replace all closing block tags with special token 
 
    $this.html($this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/h3\>|\<\/h4\>|\<\/h5\>|\<\/h6\>|\<\/div\>)/gi,"[p]").replace(/\<br\>/gi,"[br]")); 
 
    
 
    // remove all the tags 
 
    $this.html("<p>" + $this.text().replace(/\[p\]/g,"</div><p>").replace(/\[br\]/g,"<br>") + "</p>"); 
 

 
});

div#editable, div#demo { 
 
    border:1px solid gray; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div contenteditable="true" id="editable"></div> 
 

 
<div> 
 
    <h3>Demo</h3> 
 
    <p>Copy this code and paste it on the editable div above:</p> 
 
    <div id="demo"> 
 
     <p>This <b>is</b> <i>a</i> styled paragraph.</p> 
 
     <p> </p> 
 
     <p>The <span style="font-weight:bold">above paragraph</span> is empty.</p> 
 
     <p>And this is a new paragraph…<br>with a line break!</p> 
 
    </div> 
 
</div>

或者在這JSFiddle：http://jsfiddle.net/v5rae96w/1/