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

【问题标题】：Paste only plain-text into editable div仅将纯文本粘贴到可编辑的 div 中
【发布时间】：2010-08-24 02:08:34
【问题描述】：

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

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

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

【问题讨论】：

谢谢-应该让我朝着正确的方向前进，试图将答案标记为有用，但显然我太新了：/
Javascript trick for 'paste as plain text` in execCommand的可能重复

标签： javascript events text dom-events paste

【解决方案1】：

这很棘手，但并非不可能。你可以做的事情是相当复杂的，而且有点小技巧，它适用于 Firefox 2+、IE 5.5+ 和最近的 WebKit 浏览器，如 Safari 4 或 Chrome（在旧版本上未经测试）。 TinyMCE 和 CKEditor 的最新版本在其基于 iframe 的编辑器上使用了这种技术：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

它也可以通过使用 javaScript 来破解。希望这会有所帮助

我创建了一个示例here

<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");
});

【讨论】：

【解决方案4】：

您是否尝试过诸如“粘贴”或“输入”之类的事件？然后你可以使用正则表达式来触发所有 html 标签

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

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

有一个关于粘贴事件的讨论，您还应该阅读：
Catch paste input

【讨论】：