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

Question

这是我走了多远:

添加了 list 文件的权限:

"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 元素。在您的代码段中，当您单击复制按钮时，焦点会发生变化。同样，执行粘贴命令时需要聚焦目标文本区域。

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 中，最后一个参数需要是一个字符串。

您可以通过注册 Paste 事件监听器直接从剪贴板获取粘贴的文本(请参阅代码段底部)。