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



我需要将文本从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

我认为您不能使用夹板event界面,因为它表示事件您要复制按钮单击没有这样的事件。

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');
        }
    }
}

工作小提琴

只需在编辑器中添加一些文本,单击"复制",然后在您想要的任何地方粘贴。

最新更新