Javascript 粘贴到contentedittable会导致随机插入标记

我使用contentedittable字段作为用户输入，以便利用文本格式。不幸的是，我发现当用户粘贴到字段中时，会伴随大量不必要的html。我只想要剪贴板上的纯文本

为什么会这样

一个被截断的示例：

<div><br></div><div><span class="Apple-style-span" style="font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 12px; color: rgb(0, 0, 0); "><table style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; background-position: initial initial; background-repeat: initial initial; "><tbody style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><tr style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><td class="votecell" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: top; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 60px; background-position: initial initial; background-repeat: initial initial; "><div class="vote" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; text-align: center; background-position: initial initial; background-repeat: initial initial; "><span class="vote-count-post" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 31px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; display: block; color: rgb(128, 129, 133); font-weight: bold; background-position: initial initial; background-repeat: initial initial; ">1</span><a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 1px; vertical-align: baseline; background-image: url(http://sstatic.net/stackoverflow/img/sprites.png?v=3); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(0, 119, 204); text-decoration: none; cursor: pointer; overflow-x: hidden; overflow-y: hidden; display: block; width: 41px; height: 25px; text-indent: -9999em; background-position: 0px -300px; background-repeat: no-repeat no-repeat; ">...

1。。。
你得到了所有这些额外的废话，因为
contenteditable
元素支持
text/html
MIME类型。从剪贴板粘贴内容时，通常会有一个内容协商阶段：


粘贴目标表示“我支持这些内容类型：…”
剪贴板管理器然后与数据源讨论该列表，以获得粘贴目标的适当格式的粘贴数据
最后，数据以
text/html
的形式转储到
contenteditable
元素中，并伴随着所有额外的噪音

该过程可能与上述过程不完全相同，但也会类似。您最好为事件添加一个处理程序，并使用该处理程序将粘贴的数据转换为
text/plain
您只能使用hack获取纯文本。TinyMCE和CKEditor的最新版本都在其基于iframe的编辑器上使用此技术：

使用按键事件处理程序检测Ctrl-v/Shift插入事件
在该处理程序中，保存当前用户选择，在屏幕外向文档添加一个textarea元素（比如在左边-1000px），关闭
contentEditable
并在textarea上调用
focus（）
，从而移动插入符号并有效地重定向粘贴
在事件处理程序中设置一个非常短的计时器（例如1毫秒），以调用另一个存储textarea值的函数，从文档中删除textarea，重新打开
contentEditable
，恢复用户选择并粘贴文本
请注意，这仅适用于键盘粘贴事件，而不适用于从上下文或编辑菜单粘贴。
粘贴
事件会更好，但是当它触发时，在大多数浏览器中将插入符号重定向到文本区域已经太晚了。
您能建议只针对粘贴的数据的最佳方法吗？我不想从可能已经在字段中的文本中删除html标记。@pagewil:看看Tim Down的方法。您还可以抓取TinyMCE或CKEditor，查看它们如何通过菜单进行粘贴。我不管理我自己的
contenteditable
元素，我总是使用一个现有的编辑器来处理这类事情。嗯，听起来有点棘手，我确实需要适应右键单击粘贴的用户。也许用正则表达式替换无效的标记？@pagewil：如果我是你，我会避免使用正则表达式来解析HTML。另一个选项是弹出一个包含文本区域的对话框，当
粘贴
事件触发时，用户可以粘贴到其中。为什么不建议使用regex？@pagewil：虽然可以使用regex处理严格限制的HTML字符串集，但通常不可能使用JavaScript正则表达式解析HTML，通过从外部源粘贴内容，HTML可以是任何内容。这里有几个关于这个主题的链接：还有经典