JQuery - 粘贴事件，去除富文本

Question

我有一个可编辑的字段，我想要做以下操作：当用户将富文本（例如Microsoft Word）粘贴到该字段中时，我想去除所有的富文本，但保留换行符。

我的想法是：如果您将富文本粘贴到普通的<textarea>中，它会删除所有格式并保留断行（由显式换行符和块级元素创建）。我想以某种方式模拟这个过程。换句话说，创建一个临时的textarea，拦截粘贴事件，在Textarea上应用它，检索结果，并将其插入回原始的Content Editable字段。

然而，我还没有找到一种模拟这个过程的方法。如果我通过jquery将内容粘贴到textarea中，当我试图将其从那里复制回原始字段时，它似乎会保留所有的富文本格式。

- djt

---

由于客户将从Microsoft Word和其他编辑器中粘贴文本，因此请返回已翻译的文本。 - djt

有点困惑为什么这个被踩了。我解释了我想做什么，我尝试了什么，以及为什么它没起作用。 - djt

Answer 1

您可以不使用textarea，只需处理内容可编辑的div中的代码，每当其值发生更改时，移除所有标签，只留下段落和换行符，就可以实现此类功能。

思路是每当div中的内容发生更改时（侦听事件）：

• 在内部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/

- Alvaro Montoro

---

以上的解决方案存在一个漏洞，如果你尝试输入会引起问题。尝试输入“ok”，它会显示为“ko”。 - Abhijith Babu