Question

我创建了一个自定义上下文菜单（包括一个菜单项，用于将先前选择的任意文本复制到剪贴板），该菜单项可以正常工作，但有以下例外：尝试从网页复制并粘贴文本片段时该代码段的其他格式（换行符等）丢失了。

现在困扰我的问题是，有什么方法可以获取所选的（任意的）文本并保留其格式吗？我目前正在使用此功能来获取文本：

function GetSelection()
  {
var l_result;

  if(window.getSelection)
    l_result = window.getSelection();
  else
    if(document.getSelection)
      l_result = document.getSelection();
    else
      if(document.selection)
        l_result = document.selection.createRange().text;

  return l_result;
  }

通过单击上下文菜单中的 Copy 菜单项来调用此功能，因此必须进行用户干预。

为了简化传输机制，我还附加了以下事件处理程序（我在this answer中找到了此部分；不幸的是，一个人获取了整个元素的内容并将其复制到剪贴板，这违反了前提条件用户选择的任意文本都应复制）：

document.addEventListener('copy', function (p_event) {
  if(selected == '')
    return;

  p_event.clipboardData.setData('text/plain', selected);
  p_event.preventDefault();
  selected = '';
  }, true);

现在，要复制的所选内容的MIME类型设置为text/plain，因为我目前无法说服剪贴板数据对象将其接受为text/html。我现在已经进行了一些谷歌搜索，但是到目前为止我没有找到任何可行的解决方案。
这是一个完整的测试页面，用于演示效果（使用Firefox 61.0.2测试）：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
<title>Clipboard Test Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script type="application/javascript">
/* <![CDATA[ */
var selected = '';

function GetSelection()
  {
var l_result;

  if(window.getSelection)
    l_result = window.getSelection();
  else
    if(document.getSelection)
      l_result = document.getSelection();
    else
      if(document.selection)
        l_result = document.selection.createRange().text;

  return l_result;
  }

document.addEventListener('DOMContentLoaded', function () {
  document.addEventListener('copy', function(p_element) {
    if(selected == '')
      return;

    p_event.clipboardData.setData('text/html', selected);   // Fails
    p_event.clipboardData.setData('text/plain', selected);  // Works
    p_event.preventDefault();
    selected = '';
    }, true);

  document.getElementById('grab-text').addEventListener('click', function (p_event) {
    selected = GetSelection();
    if(selected == '')
      {
      alert('Please select some text first!');
      return;
      }

    document.execCommand('copy');
    }, false);
  }, false);
/* ]]> */
</script>
</head>
<body>
<header><h1>Clipboard Test Case</h1></header>
<main>
<p style="white-space: pre;">
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<form action="javascript:void(0);">
<input type="button" id="grab-text" value="Grab text!" />
</form>
</main>
</body>
</html>

可行的解决方案应使用本机JavaScript，并且不使用JQuery或其他库，也不要使用Flash等类似方法绕行。

使用本地JavaScript

0 个答案: