Question

这是我走了多远：

添加了对清单文件的权限：

"permissions": ["clipboardRead", "clipboardWrite"]

我读过有关chrome.experiment.clipboard的内容，但这似乎已被删除，转而使用document.execCommand（'copy'）。

我写了这个程序试试看：

main() {
  var copy = new ButtonElement()..text = 'copy';
  var paste = new ButtonElement()..text = 'paste';
  var textarea = new TextAreaElement()..text = 'foo';
  document.body.nodes.addAll([copy, paste, textarea]);      
  copy.onClick.listen((event) => document.execCommand('copy', null, null));
  paste.onClick.listen((event) => document.execCommand('paste', null, null));
}

理想情况下，对于我的应用程序，我想编写一个名为getClipboardText（）和setClipboardText（String）的函数。但首先，我试图让这个基本的例子起作用。

关于下一步尝试的任何想法？

编辑：下面amouravski指出的更新错误。谢谢;）

修正 - 谢谢基思：

class Clipboard {
  static String get text {
    var active = document.activeElement;
    var hidden = new TextAreaElement();
    document.body.append(hidden);
    hidden.focus();
    document.execCommand('paste', null, '');    
    active.focus();
    hidden.remove();
    return hidden.value;
  }

  static set text(String s) {
    var active = document.activeElement;
    var hidden = new TextAreaElement();
    hidden.value = s;
    document.body.append(hidden);    
    hidden.select();
    document.execCommand('copy', null, '');
    active.focus();
    hidden.remove();
  }
}

Answer 1

你离我不太远...... 为了从textarea复制用户选择，在执行复制命令时需要聚焦textarea元素。在您的代码段中，单击复制按钮时，焦点会移动。同样，执行粘贴命令时，需要聚焦目标textarea。

import 'dart:html';

main() {
  var copy = new ButtonElement()..text = 'copy';
  var paste = new ButtonElement()..text = 'paste';
  var textarea = new TextAreaElement()..text = 'foo';
  var resultTextarea = new TextAreaElement();
  var label = new ParagraphElement()..text = 'paste here too...';
  document.body.nodes.addAll([copy, paste, textarea, resultTextarea, label]);

  // Copy Handler
  void copyText(Event e) {
    //Check whether anything is selected, otherwise select all text.
    if (textarea.selectionStart != null &&
        textarea.selectionStart != textarea.selectionEnd) {
      textarea.focus();
    } else {
      textarea.select();
    }

    document.execCommand('copy', null, "");
  }

  // Paste handler
  void pasteText(Event e) {
    resultTextarea.select(); // Select all text in result text area.
                             // Note: replaces all text. Use focus
                             // to paste at cursor position.
    document.execCommand('paste', null, "");
  }

  // Register button handlers for copy and paste.
  copy.onClick.listen(copyText);
  paste.onClick.listen(pasteText);

  // You can also register a Paste event listener to capture copied text
  // directly from the clipboard.
  document.on['paste'].listen((e) {
    var item = e.clipboardData.items.item(e.clipboardData.items.length-1);

    if(item.type == 'text/plain') {
      item.getAsString().then((clip) => label.text = clip);
    }
  });
}

几点说明：

对document.execCommand方法签名的更改不太正确。看来，至少在Dartium中，最后一个参数需要是一个字符串。
您可以通过注册粘贴事件监听器直接从剪贴板中获取粘贴文本（请参阅代码段底部）。

Answer 2

错误消息不是很具描述性，但您需要做的是提供document.execCommand 3个参数，如下所示：

... 
  copy.onClick.listen((event) => document.execCommand('copy', null, null));
  paste.onClick.listen((event) => document.execCommand('paste', null, null));
...

另请参阅：http://api.dartlang.org/docs/releases/latest/dart_html/Document.html#execCommand

如何在使用Dart构建的chrome打包应用程序中实现复制和粘贴？

2 个答案: