JQuery - 粘贴事件，剥离富文本

Question

我有一个 contentEditable 字段，我想在其中执行以下操作。当用户将富文本粘贴到字段中（microsoft word 或其他）时，我想删除所有富文本，但保留换行符。

我的想法是：如果您将富文本粘贴到纯 <texarea> 中，它会删除所有格式并保留中断（由显式新行以及块级元素创建）。我想以某种方式模拟这一点。换句话说，创建一个临时文本区域，拦截粘贴事件，将其应用到文本区域，检索结果，并将它们插入回原来的 Content Editable 字段中。

但是，我还没有找到模拟这个的方法。如果我通过 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 和其他文字处理器配合得很好）。如果用户像div（或其他导致换行的块元素）一样复制HTML，它就不会那么好用了。如果您需要打破所有块元素，则此解决方案可能需要进行一些更改。

---

要解决这个问题，您可以用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/