5

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

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

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

4

4 回答 4

1

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

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

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

于 2010-08-24T08:18:06.640 回答
1

它也可以通过使用 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");
});
于 2014-01-17T15:18:05.533 回答
1

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

.addEvent('paste', function(e) {
        setTimeout(function(){
            if(condition){
                //modify content
            }
        },350);
    });
于 2012-05-10T19:34:16.703 回答
0

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

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

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

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

于 2010-08-24T05:57:04.913 回答