相关疑难解决方法(0)

Web应用程序如何检测粘贴事件并检索要粘贴的数据？

我想在将文本粘贴到富文本编辑器之前删除HTML内容.

之后粘贴后清理文本有效,但问题是所有以前的格式都丢失了.例如,我可以在编辑器中编写一个句子并将其设为粗体,但是当我粘贴新文本时,所有格式都会丢失.我想只清理粘贴的文本,并保持以前的格式不变.

理想情况下,该解决方案应适用于所有现代浏览器(例如,MSIE,Gecko,Chrome和Safari).

请注意,MSIE有clipboardData.getData(),但我找不到其他浏览器的类似功能.

我想将一些具有不同字体,字体大小,字体粗细等的富文本粘贴到内容可编辑的内容中,div并且只保留粗体和斜体.知道如何去做吗？

以下代码在粘贴到内容可编辑的div时将富文本转换为纯文本.

$('[contenteditable]').on('paste',function(e) {
    e.preventDefault();
    var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste something..');
    document.execCommand('insertText', false, text);
});

我已经尝试text在上面的代码中查看变量,但似乎没有格式化.

我想阻止用户在contenteditablediv中粘贴不允许的标记.

我想将粘贴限制为粗体,斜体,打击,下划线和链接.

什么是最好的方式(我正在使用jQuery)？

这不是JQuery Text Editor Paste Without Formatting的重复.我不想在没有格式化的情况下粘贴.我想选择/限制一些标记.

我已经阅读了以下问题,没有提供明确答案:

• JQuery文本编辑器粘贴没有格式
• 如何在contenteditable div中过滤用户粘贴的内容？
• 在execCommand中'粘贴为纯文本'的Javascript技巧
• Contenteditable只允许纯文本

我需要能够允许用户粘贴到可编辑的div中（通过用户选择的内容：右键单击并粘贴，快捷键等），但是我想放弃格式设置，而只采用纯文本格式。

我不能使用textarea，因为div如果允许用户启动的事件应用，则允许基本格式（粗体和斜体）。

onbeforepaste事件看起来很有希望，但是根据quirksmode，支持如此有限，以致无法使用。

蒂亚的任何建议

我试图用chrome的'纯文本'的行为创建一个contenteditable div.因此,用户只能输入纯文本,而在复制富文本时,它会被粘贴为纯文本.在我的脚本中,@ -mentions转换为按钮并使用Rangy.js添加

在普通的contenteditable div中,可以粘贴富文本,我需要将其转换为普通文本.唯一的问题是检测粘贴的内容,然后将其转换为文本并将其插入正确的位置,并在恢复胡萝卜位置后.在更多行上选择更多文本时更难.

我是否认为很难,是否有更简单的解决方案？或者任何人都可以推荐最轻量级的编辑器？

谢谢!

我尝试将文本粘贴到多个字段中，但格式只在第一个元素上被清除，而不是第二个等等。

我发现这个问题/sf/answers/841969551/工作正常，但同样，在多个元素上它不起作用。

所以我得到了这个 HTML

<div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span></div>
<br />
<div style="border:1px solid red" contenteditable></div>
<br />
<div style="border:1px solid red" contenteditable></div>

和这个javascript：

document.querySelector("div[contenteditable]").addEventListener("paste", function(e) {
   e.preventDefault();
   var text = e.clipboardData.getData("text/plain");
   document.execCommand("insertHTML", false, text);
});

我有这个小提琴http://jsfiddle.net/tdjuc8es/

只需复制并粘贴Some rich HTML- 文本，看看会发生什么

谁能帮帮我？

假设我复制了一些“恶意”输入，例如带有事件处理程序或其他 JavaScript 的 DOM 节点

<img src="bunny.jpg" onload="alert('hi');">

如果我将其复制到剪贴板并将其粘贴到contenteditablediv 中，则事件处理程序将被干净地删除。

<img src="/Users/tjhance/Desktop/bunny.jpg">

我现在可以随心所欲地操纵这个 DOM 节点了。到目前为止还不错。

另一方面，假设我想挂钩浏览器的粘贴事件并以我自己的方式处理粘贴。我可以轻松获取剪贴板数据：

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

<script>

$('#myContentEditableDiv').on('paste', function(event) {
    console.log(event);
    var pastedHtml = event.originalEvent.clipboardData.getData('text/html');
    console.log(pastedHtml);
});

</script>

当我粘贴时，我得到了 HTML

<meta charset='utf-8'><img src="/Users/tjhance/Desktop/bunny.jpg" onload="alert('hi');" style="color: rgb(0, 0, 0); font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">

它未经消毒，并且仍然具有事件侦听器。据我所知，我无法用这个字符串做任何事情。我无法使用浏览器将其解析为 HTML，因为它会运行 JavaScript，这是一个巨大的安全漏洞。

很明显，浏览器具有一定的清理 HTML 的功能，因为它是在粘贴时执行的。因此，如果我想要干净的 HTML，我可以等待事件完成并将 …

编辑：不是重复的

事实上，甚至在这里提到并链接了标记为重复的问题。这些问题的标题和目的完全不同。另一个问题的答案之一，可以说是用来回答这个问题的，是出于完全不同的原因（与 IE 的兼容性），并且很难被理解为这个问题的答案。

原问题

我从这个Javascript 技巧中获得了以下代码，用于在 execCommand 中“粘贴为纯文本”

我按预期工作。它给了我纯文本。

但是，虽然我想摆脱所有文本格式，但我只想保留复制文本的换行符？有没有办法修复此代码以实现此行为？

注意：举个例子，我们在 Stack Overflow 上写我们的问题的问题编辑器似乎就是这样工作的。摆脱一切，但尊重换行符。

// ALLOW TEXT ONLY ON PASTE
  function onPaste(e) {
    e.preventDefault();
    // GET TEXT REPRESENTATION OF CLIBOARD DATA
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    // INSERT TEXT MANUALLY
    document.execCommand("insertHTML", false, text);
  }

片段

// ALLOW TEXT ONLY ON PASTE
  function onPaste(e) {
    e.preventDefault();
    // GET TEXT REPRESENTATION OF CLIBOARD DATA
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    // INSERT …