删除复制+粘贴的富文本格式？（跨浏览器）答案

【问题标题】：Removing rich text formatting for copy + paste? (Cross Browser)删除复制+粘贴的富文本格式？（跨浏览器）
【发布时间】：2014-07-18 18:11:00
【问题描述】：

我不确定 Javascript 或 CSS 修复是否可以解决我网站上的这个问题。这似乎只发生在 Chrome 上（还不确定 IE）。

每当用户从我的 AspDotNetStorefront 站点复制文本并将其粘贴到 Word 文档中时，粘贴的文本都会包含灰色背景。我可以在我的网站上做些什么来防止这种富文本格式粘贴功能到文档上吗？

除了 Microsoft Word 的默认粘贴设置之外，我不确定这是什么原因。

【问题讨论】：

通常，右键单击“粘贴为纯文本”，或者 [ctrl]+[shift]+[V] 这样做。您也可以先粘贴然后在记事本中剪切来转换为纯文本。
谢谢 :) 但我试图找出一种方法，让用户不必做任何这些事情。

标签： javascript html css aspdotnetstorefront

【解决方案1】：

.unselectable{
   position:absolute;
   z-index:1;
   color:green;
   -webkit-user-select:none;
}
.selectable{
   position:absolute;
   z-index:2;
   color:rgba(0,0,0,0);
   -webkit-user-select:text;
}

<p class="unselectable">Lorem</p>
<p class="selectable">Lorem</p>

【讨论】：

【解决方案2】：

您可以拦截复制事件，获取没有样式的选择，然后将其放入剪贴板。

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

【讨论】：

【解决方案3】：

您可以使用clippy 库https://github.com/mojombo/clippy 添加复制到剪贴板按钮。这有助于删除格式。

【讨论】：

【解决方案4】：

如果您不想使用 Flash，可以尝试这样的方法，以便在不格式化的情况下轻松复制文本：

CSS：

#box {background-color:gray; color:white;width:200px;height:400px;align:center;margin-left:50px;padding:30px}
#copy {position:fixed;top:15px;left:200px;text-decoration:underline}

HTML：

<div id="box">
    <div id="copy" onclick="selectable('p')">Click to select text</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia eros et justo pulvinar pulvinar. Pellentesque nec nisl feugiat, cursus lorem sed, venenatis sem. Curabitur vitae commodo ante, a pellentesque ligula. Morbi sit amet tincidunt ipsum. Fusce rutrum massa at velit dignissim accumsan. Donec hendrerit lorem sed leo viverra, vel cursus sapien lobortis. Praesent quis ligula non justo rhoncus placerat eu non leo. Pellentesque vitae congue enim. Quisque eget turp</p></div>

JavaScript：

selectable=function(selector){
    var $elem=$(selector);
    innerHTML=$(selector).html()  ;
    $elem.hide();
    $elem.parent().append($('<textarea />').val(innerHTML).css({height:'400px'}));
    $('textarea').select();
};

代码并不漂亮，只是为了演示概念。

JSFIDDLE：http://jsfiddle.net/rXG2G/

【讨论】：

【解决方案5】：

您的问题与 javascript、html 或 css 无关。

在 Word 中粘贴文本会默认保留格式。要粘贴而不格式化，用户需要右键单击 Word 文档并执行Paste Special...。

【讨论】：

不一定。我试图找出一种用户不必经过这些步骤的方法（我正在考虑那些不知道如何粘贴特殊的用户）。我想自己处理它，是否可以使用::selection
在这种情况下，您可以像 Pim 建议的那样使用复制到剪贴板按钮。当用户点击它时，你可以复制一个没有格式的文本版本。