仅将纯文本粘贴到可编辑 div 中

Question

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

我无法使用文本区域，因为如果由用户启动的事件应用，div 将允许基本格式（粗体和斜体）。

onbeforepaste 事件看起来很有希望，但根据 quirksmode 的说法，支持非常有限，以至于无法使用。

Answer 1

这很棘手，但并非不可能。您可以做的事情非常复杂，并且需要一些技巧，可以在 Firefox 2+、IE 5.5+ 和最新的 WebKit 浏览器（例如 Safari 4 或 Chrome）中工作（在旧版本上未经测试）。 TinyMCE 和 CKEditor 的最新版本在其基于 iframe 的编辑器上使用了此技术：

1. 使用按键事件处理程序检测 ctrl-v / shift-ins 事件
2. 在该处理程序中，保存当前用户选择，在屏幕外添加一个 textarea 元素（比如说在文档的左侧-1000px），关闭 contentEditable 并在文本区域上调用 focus() ，从而移动插入符并有效地重定向粘贴
3. 在事件处理程序中设置一个非常短的计时器（比如 1 毫秒）来调用另一个函数存储 textarea 值，从文档中删除 textarea，重新打开 contentEditable，恢复用户选择并粘贴文本。

请注意，这仅适用于键盘粘贴事件，不适用于从上下文或编辑菜单粘贴。 paste 事件会更好，但当它触发时，将插入符号重定向到文本区域（至少在某些浏览器中）为时已晚。

Answer 2

对于 Ctrl+v 我检查了 keyup 上可编辑 div 的内容。您可以修改该事件中的内容。我正在使用 nicedit 文本编辑器。
这不适用于从右键单击粘贴 ->粘贴。
对于“粘贴”，我必须使用 settimeout 修改内容。

.addEvent('paste', function(e) {
        setTimeout(function(){
            if(condition){
                //modify content
            }
        },350);
    });

Answer 3

也可以使用 javaScript 对其进行攻击。希望这有助于

我此处创建了一个示例

<div contentEditable="true" id="clean-text-div"> </div>
<div id="clean-btn"> Clean Me</div>
<div id="message"> paste html content and clean background HTML for pure text</div>


$("#clean-btn").click(function(){
    $("#clean-text-div").text($("#clean-text-div").text());
    $("#message").text("Your text is now clean");
});

Answer 4

您是否尝试过“粘贴”或“输入”等事件？然后你可以使用正则表达式来删除所有html标签

$(document).bind('paste', function(e){ alert('pasting!') })

http://www. hscripts.com/scripts/JavaScript/remove-html-tag.php

有一个关于粘贴事件的讨论，您还应该阅读：
捕获粘贴输入

Answer 5

您可以使用：

yourContentEditable.addEventListener('paste', handlePaste)

function handlePaste(e) {
    e.preventDefault()
    let text = e.clipboardData.getData("text/plain")
    document.execCommand("insertText", false, text)
}

execCommand 现在似乎已被弃用。所以要小心。但主要浏览器继续支持它。