在随机标签插入中粘贴到满意的结果 [英] Pasting into contentedittable results in random tag insertion

问题描述

我将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- horizo​​ntal-spacing：0px; -webkit-border-vertical-spacing：0px; background-position：初始初始;背景-repeat：初始初始; >< 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;边界颜色：初始; font-size：13px; vertical-align：baseline; background-image：initial; background-attachment：initial; background-origin：initial; background-clip：initial; background-color：transparent;背景位置：初始初始;背景重复：初始初始化; >< 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;边界颜色：初始; font-size：13px; vertical-align：baseline; background-image：initial;背景附件：初始; background-origin：initial; background-clip：initial; background-color：transparent;背景位置：初始初始;背景重复：初始初始化; >< td class =votecellstyle =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-origin：initial; background-clip：initial; background-color：transparent;宽度：60px;背景位置：初始初始;背景重复：初始初始化; >< div class =votestyle =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;背景位置：初始初始;背景重复：初始初始化; >< span class =vote-count-poststyle =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;显示：块;颜色：rgb（128，129，133）; font-weight：bold;背景位置：初始初始;背景重复：初始初始化; > 1< / span>< a class =vote-down-offtitle =这个问题没有显示任何研究工作;它不清楚或没有用（再次点击撤消）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;边界颜色：初始; 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;颜色：rgb（0,119,204）;文字修饰：无;光标：指针; overflow-x：hidden;溢出-y：隐藏;显示：块;宽度：41px;身高：25px;文本缩进：-9999em; background-position：0px -300px;背景重复：不重复不重复; > ... 
  

解决方案

最新版本的TinyMCE和CKEditor在其基于iframe的编辑器中使用这种技术：

1. 检测一个使用按键事件处理程序插入事件


2. In - v / <该处理程序保存当前用户选择，在文档外添加一个textarea元素（例如在左边-1000px处），将 contentEditable 关闭并调用 focus（），这样移动插入符号并有效地重定向粘贴


3. 在事件处理函数中设置一个非常简短的计时器（比如1毫秒）调用另一个存储textarea值的函数，从文档中删除textarea，重新打开 contentEditable ，恢复用户选择并粘贴文本。

请注意，这仅适用于键盘粘贴事件d不粘贴上下文或编辑菜单。 粘贴事件会更好，但在它触发的时候，将脱字符重定向到大多数浏览器的textarea中为时已晚。

I am using a contentedittable field as user input so that I can exploit text formatting. Unfortunately I have found that when a user pastes into the field a massive amound of unnessessary html comes with it. I only want the plain text from the clipboard.

Why is this happening?!

A Truncated Example:

<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; ">...

解决方案

You can only get the plain text using a hack. Recent versions of both TinyMCE and CKEditor use this technique on their iframe-based editors:

1. Detect a Ctrl-v / Shift-Insert event using a keypress event handler
2. In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn contentEditable off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns contentEditable back on, restores the user selection and pastes the text in.

Note that this will only work for keyboard paste events and not pastes from the context or edit menus. The paste event would be better but by the time it fires, it's too late to redirect the caret into the textarea in most browsers.

这篇关于在随机标签插入中粘贴到满意的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！