使用 W3C 剪贴板将文本从 extjs htmleditor 组件复制到剪贴板 API

Question

我需要将文本从 extjs htmleditor 组件复制到剪贴板，然后将其粘贴到文本文档（word 或 oppenoffice）中。

可以使用 W3C 剪贴板实现此目的 API?

handler:function(){
        var one = Ext.ComponentQuery.query('#OneItemId')[0].getValue();
        var two = Ext.ComponentQuery.query('#TwoItemId')[0];

        document.addEventListener('copy', function(e){
            e.clipboardData.setData('text/plain', one);
            e.preventDefault(); 
      });

        document.addEventListener('paste', function(e){               
            var values = e.clipboardData.getData('text/html');
            two.setValue(values);
      });
    }

https://fiddle.sencha.com/#fiddle/1cdi

Answer 1

我认为你不能使用 ClipboardEvent 接口，因为它 代表事件 提供与剪贴板修改相关的信息，即剪切、复制和粘贴事件和因为你想在按钮点击时复制，所以没有这样的事件。

Select 并手动复制 htmleditor 组件中的文本有点棘手，因为它的 DOM 表示是 <iframe>.

我认为解决方案是这样的：

{
    xtype:'button',
    text:'Copy',
    handler:function(){
        var one = Ext.ComponentQuery.query('#OneItemId')[0];
        var two = Ext.ComponentQuery.query('#TwoItemId')[0];

        var editorFrame = one.inputEl.dom,
            editorFrameDocument = editorFrame.contentDocument || editorFrame.contentWindow.document;

        if(editorFrameDocument) {
            var documentSelection, selectionRange;

            // Select text in htmleditor iframe body
            // IE
            if (editorFrameDocument.body.createTextRange) {
                selectionRange = editorFrameDocument.body.createTextRange();
                selectionRange.moveToElementText(editorFrameDocument.body);
                selectionRange.select();
            } else if (window.getSelection) {
                documentSelection = editorFrameDocument.getSelection()        

                selectionRange = editorFrameDocument.createRange()
                selectionRange.selectNodeContents(editorFrameDocument.body);

                documentSelection.removeAllRanges();
                documentSelection.addRange(selectionRange);
            }

            // Copy selected text
            editorFrameDocument.execCommand('copy');
        }
    }

}

Working fiddle

只需向编辑器添加一些文本，单击 "Copy" 并粘贴到您想要的任何位置。

使用 W3C 剪贴板将文本从 extjs htmleditor 组件复制到剪贴板 API

Copy text from an extjs htmleditor component to the clipboard with the W3C Clipboard API

javascript

clipboard

extjs

extjs5